Skip to content
Permalink
Browse files

fix(examples): Use window in favour of deprecated frameWindow prop (#64)

  • Loading branch information...
michaeltaranto committed Apr 17, 2019
1 parent e847113 commit b2f3bc6739208ace4870780c44c29c17383cf6b6
@@ -118,22 +118,6 @@ module.exports = {
};
```

## CSS-in-JS Support

If you're using a CSS-in-JS library that generates styles dynamically, you might need to configure it to insert them into the iframe. For example, when using [styled-components](https://www.styled-components.com):

```js
import React from 'react';
import { StyleSheetManager } from 'styled-components';
import ThemeProvider from '../path/to/ThemeProvider';
export default ({ theme, children, frameWindow }) => (
<StyleSheetManager target={frameWindow.document.head}>
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</StyleSheetManager>
);
```

## TypeScript Support

If a `tsconfig.json` file is present in your project, static prop types are parsed using [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) to provide better autocompletion in the Playroom editor.
@@ -14,8 +14,6 @@
"@babel/preset-react": "^7.0.0",
"@material-ui/core": "^3.3.1",
"babel-loader": "^8.0.4",
"jss": "^9.8.7",
"react": "^16.6.0",
"react-jss": "^8.6.1"
"react": "^16.6.0"
}
}
@@ -1,29 +1,10 @@
import React from 'react';
import { create } from 'jss';
import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
import JssProvider from 'react-jss/lib/JssProvider';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';

export default class FrameComponent extends React.Component {
constructor(props) {
super(props);

this.generateClassName = createGenerateClassName();
this.jss = create({
...jssPreset(),
insertionPoint: props.frameWindow.document.head
});
}

render() {
const { children } = this.props;

return (
<JssProvider jss={this.jss} generateClassName={this.generateClassName}>
<MuiThemeProvider sheetsManager={new Map()}>
{children}
</MuiThemeProvider>
</JssProvider>
);
return <MuiThemeProvider>{children}</MuiThemeProvider>;
}
}
@@ -971,15 +971,11 @@ is-date-object@^1.0.1:
resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
integrity sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=

is-function@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"

is-in-browser@^1.0.2, is-in-browser@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"

is-plain-object@^2.0.1, is-plain-object@^2.0.4:
is-plain-object@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
dependencies:
@@ -1045,32 +1041,16 @@ json5@^2.1.0:
dependencies:
minimist "^1.2.0"

jss-camel-case@^6.0.0, jss-camel-case@^6.1.0:
jss-camel-case@^6.0.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-6.1.0.tgz#ccb1ff8d6c701c02a1fed6fb6fb6b7896e11ce44"
dependencies:
hyphenate-style-name "^1.0.2"

jss-compose@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/jss-compose/-/jss-compose-5.0.0.tgz#ce01b2e4521d65c37ea42cf49116e5f7ab596484"
dependencies:
warning "^3.0.0"

jss-default-unit@^8.0.2:
version "8.0.2"
resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.2.tgz#cc1e889bae4c0b9419327b314ab1c8e2826890e6"

jss-expand@^5.3.0:
version "5.3.0"
resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-5.3.0.tgz#02be076efe650125c842f5bb6fb68786fe441ed6"

jss-extend@^6.2.0:
version "6.2.0"
resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-6.2.0.tgz#4af09d0b72fb98ee229970f8ca852fec1ca2a8dc"
dependencies:
warning "^3.0.0"

jss-global@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-3.0.0.tgz#e19e5c91ab2b96353c227e30aa2cbd938cdaafa2"
@@ -1081,38 +1061,17 @@ jss-nested@^6.0.1:
dependencies:
warning "^3.0.0"

jss-preset-default@^4.3.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-4.5.0.tgz#d3a457012ccd7a551312014e394c23c4b301cadd"
dependencies:
jss-camel-case "^6.1.0"
jss-compose "^5.0.0"
jss-default-unit "^8.0.2"
jss-expand "^5.3.0"
jss-extend "^6.2.0"
jss-global "^3.0.0"
jss-nested "^6.0.1"
jss-props-sort "^6.0.0"
jss-template "^1.0.1"
jss-vendor-prefixer "^7.0.0"

jss-props-sort@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323"

jss-template@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/jss-template/-/jss-template-1.0.1.tgz#09aed9d86cc547b07f53ef355d7e1777f7da430a"
dependencies:
warning "^3.0.0"

jss-vendor-prefixer@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz#0166729650015ef19d9f02437c73667231605c71"
dependencies:
css-vendor "^0.3.8"

jss@^9.3.3, jss@^9.7.0, jss@^9.8.7:
jss@^9.3.3:
version "9.8.7"
resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.7.tgz#ed9763fc0f2f0260fc8260dac657af61e622ce05"
dependencies:
@@ -1272,7 +1231,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"

prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2:
prop-types@^15.6.0, prop-types@^15.6.2:
version "15.6.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
dependencies:
@@ -1287,16 +1246,6 @@ react-event-listener@^0.6.2:
prop-types "^15.6.0"
warning "^4.0.1"

react-jss@^8.6.1:
version "8.6.1"
resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-8.6.1.tgz#a06e2e1d2c4d91b4d11befda865e6c07fbd75252"
dependencies:
hoist-non-react-statics "^2.5.0"
jss "^9.7.0"
jss-preset-default "^4.3.0"
prop-types "^15.6.0"
theming "^1.3.0"

react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -1429,15 +1378,6 @@ symbol-observable@^1.0.4, symbol-observable@^1.1.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"

theming@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/theming/-/theming-1.3.0.tgz#286d5bae80be890d0adc645e5ca0498723725bdc"
dependencies:
brcast "^3.0.1"
is-function "^1.0.1"
is-plain-object "^2.0.1"
prop-types "^15.5.8"

to-fast-properties@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -1,15 +1,12 @@
import React from 'react';
import { StyleSheetManager } from 'styled-components';
import { Provider } from 'reakit';
import theme from 'reakit-theme-default';

export default ({ children, frameWindow }) => (
export default ({ children }) => (
<Provider theme={theme}>
<StyleSheetManager target={frameWindow.document.head}>
<React.Fragment>
<style>{'* { font-family: Helvetica, Arial, sans-serif; }'}</style>
{children}
</React.Fragment>
</StyleSheetManager>
<React.Fragment>
<style>{'* { font-family: Helvetica, Arial, sans-serif; }'}</style>
{children}
</React.Fragment>
</Provider>
);

0 comments on commit b2f3bc6

Please sign in to comment.
You can’t perform that action at this time.