├── .gitignore ├── .npmignore ├── README.md ├── demo.gif ├── docs ├── assets.json ├── index.html └── static │ ├── css │ └── test-i-frame-playground.58ff36ffa9631be1ca36.css │ └── js │ ├── 4.58ff36ffa9631be1ca36.js.map │ ├── 4.6940e840.js │ ├── app.3714cb50.js │ ├── app.58ff36ffa9631be1ca36.js.map │ ├── runtime~app.58ff36ffa9631be1ca36.js │ ├── runtime~app.58ff36ffa9631be1ca36.js.map │ ├── test-i-frame-playground.53a5fec3.js │ ├── test-i-frame-playground.58ff36ffa9631be1ca36.js.map │ ├── vendors.58ff36ffa9631be1ca36.js.map │ └── vendors.e5991bda.js ├── doczrc.js ├── helpers ├── Header.css └── Header.jsx ├── package.json ├── rollup.config.js ├── src ├── IFramePlayground.css └── IFramePlayground.jsx ├── test ├── IFramePlayground.mdx ├── TestComponent.css └── TestComponent.jsx └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | yarn-error.log 3 | .docz 4 | dist 5 | .DS_Store -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | yarn-error.log 3 | .docz 4 | docs 5 | test 6 | doczrc.js 7 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Docz IFrame Playground 2 | 3 | The default Docz `` is really cool, but it does not serve your components in an **isolated browsing context**. This means your components live in a shared document environment with the Docz theme 4 | 5 | The disadvantages of shared browsing context are: 6 | 7 | - It makes developers hard to test component responsiveness 8 | - Possible CSS collisions between Docz default theme style and component style 9 | 10 | This project aims to solve the issue by using `\n {enableResizing && (\n \n this.handleResizeStart(e, 'vertical')}\n style={{\n width,\n }}\n />\n this.handleResizeStart(e, 'horizontal')}\n style={{\n left: width,\n }}\n />\n \n )}\n \n );\n }\n\n componentDidMount() {\n const iFrameNode = this.ref.current;\n if (iFrameNode) {\n iFrameNode.addEventListener('load', this.handleLoad);\n }\n }\n\n componentWillMount() {\n this.removeEventListeners();\n }\n}\n\nIFramePlayground.propTypes = {\n /**\n * If enabled, resize controller will be available.\n * You can use it to control `` viewport size instead of using Docz Playground resize controller\n * */\n enableResizing: PropTypes.bool,\n minWidth: PropTypes.number,\n minHeight: PropTypes.number,\n /** If not provided, default to parent container width */\n maxWidth: PropTypes.number,\n maxHeight: PropTypes.number,\n};\n\nIFramePlayground.defaultProps = {\n enableResizing: false,\n minWidth: 200,\n minHeight: 200,\n maxWidth: null,\n maxHeight: null,\n};\n\nexport default IFramePlayground;\n","import React from 'react';\n\nimport pkg from './../package.json';\n\nimport styles from './Header.css';\n\nconst Header = () => (\n

IFramePlayground

\n {pkg.version}\n

\n);\n\nexport default Header;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport styles from './TestComponent.css';\n\nconst TestComponent = ({ title, height }) => (\n

{title}

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa\n reprehenderit porro fuga, quas aliquid quia. Labore nostrum autem\n temporibus odio corporis, tenetur accusamus rem velit voluptatem eligendi\n assumenda quaerat illo?\n

\n Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod consectetur\n repudiandae accusantium dolor atque fuga odio, animi, natus asperiores\n sapiente sint. Suscipit consectetur eveniet reprehenderit non ipsa quia,\n voluptatum quas! Lorem ipsum dolor sit amet consectetur adipisicing elit.\n Quisquam vitae, itaque laudantium et aliquid voluptates obcaecati quis\n repellat nulla quia, officiis ut, iusto ab molestiae quae? Fugiat\n obcaecati laborum assumenda! Lorem ipsum dolor sit amet consectetur\n adipisicing elit. Labore reiciendis debitis cum ipsam ducimus nobis nihil\n consectetur? Ea, dolor assumenda! Nulla voluptatem quod hic eum\n consequatur, exercitationem cum error obcaecati. Lorem ipsum dolor sit\n amet consectetur adipisicing elit. Natus sapiente incidunt perspiciatis\n quasi ex amet a aliquam dolorem laborum asperiores provident nulla,\n repudiandae eos sint dignissimos maiores exercitationem consectetur\n nesciunt.\n

\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto\n obcaecati, reprehenderit sit rerum vel accusantium necessitatibus. Iure,\n fuga dolorum et cumque dicta nulla ducimus est numquam praesentium,\n dolorem debitis esse? Lorem ipsum dolor sit, amet consectetur adipisicing\n elit. Placeat impedit ea, architecto ullam inventore aperiam neque earum\n alias error excepturi illo dolorum asperiores perspiciatis reiciendis ipsa\n aliquid nobis molestiae facere!\n

\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis\n consequuntur soluta officiis at, sit placeat illo asperiores eum porro\n quas adipisci, voluptatibus dolor alias quis. Tempore eveniet ab ipsa\n mollitia. Lorem ipsum dolor sit amet consectetur adipisicing elit. Est\n dolor quod quidem, ea suscipit alias tempora nemo exercitationem aut\n delectus vitae sapiente vero molestiae perferendis ipsum eum harum,\n inventore numquam! Lorem, ipsum dolor sit amet consectetur adipisicing\n elit. Iure eius cupiditate eum, adipisci voluptate doloremque dolores\n ipsam, vero nesciunt ullam facere veritatis inventore? Aspernatur eum\n magnam quaerat odit numquam placeat! Lorem ipsum, dolor sit amet\n consectetur adipisicing elit. Provident expedita molestias facilis\n laudantium, magnam officiis? Rem, enim? Ab nulla aliquid soluta aut.\n Officiis quasi consequuntur saepe totam est, odio sed! Lorem ipsum dolor\n sit amet consectetur adipisicing elit. Quis ab fugit sequi repellendus.\n Nulla officia, pariatur eveniet aut, ullam quis fuga perspiciatis ipsam\n deleniti sapiente perferendis vitae ut eos inventore? Lorem ipsum dolor\n sit, amet consectetur adipisicing elit. Cum reiciendis consequatur facere\n ut quas deleniti aut eum sequi excepturi officia temporibus quos odio,\n expedita est nihil! Dolore error facilis eum.\n

\n);\n\nTestComponent.propTypes = {\n height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n title: PropTypes.string,\n};\n\nTestComponent.defaultProps = {\n height: 300,\n};\n\nexport default TestComponent;\n","\n import React from 'react'\n import { MDXTag } from '@mdx-js/tag'\n import { Playground, PropsTable } from 'docz';\nimport IFramePlayground from './../src/IFramePlayground';\nimport Header from './../helpers/Header';\nimport TestComponent from './TestComponent';\n\nconst layoutProps = {\n \n};\nexport default class MDXContent extends React.Component {\n constructor(props) {\n super(props)\n this.layout = null\n }\n render() {\n const { components, ...props } = this.props\n\n return \n\n

\n{`Demo`}\n{`You can nest `}{``}{` under `}{``}\n\\n\\n \\n'} __scope={{props: this ? this.props : props,IFramePlayground,Header,TestComponent}}>\n \n \n \n \n\n{`You can also use standalone `}{``}\n{`Make sure to turn on `}{`enableResizing`}\n\n \n\n{`API`}\n\n \n }\n}\n ","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"TestComponent_container__LG0yr\"};"],"sourceRoot":""} -------------------------------------------------------------------------------- /doczrc.js: -------------------------------------------------------------------------------- 1 | import { css } from 'docz-plugin-css'; 2 | 3 | export default { 4 | dest: 'docs', 5 | base: '/docz-iframe-playground/', 6 | plugins: [ 7 | css({ 8 | preprocessor: 'postcss', 9 | cssmodules: true, 10 | loaderOpts: { 11 | /* whatever your preprocessor loader accept */ 12 | }, 13 | }), 14 | ], 15 | }; 16 | -------------------------------------------------------------------------------- /helpers/Header.css: -------------------------------------------------------------------------------- 1 | .header { 2 | margin: 40px 0; 3 | font-family: "Playfair Display", serif; 4 | position: relative; 5 | display: flex; 6 | } 7 | 8 | .title { 9 | font-size: 60px; 10 | } 11 | 12 | .version { 13 | color: #0B5FFF; 14 | font-size: 20px; 15 | margin-top: 20px; 16 | } -------------------------------------------------------------------------------- /helpers/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import pkg from './../package.json'; 4 | 5 | import styles from './Header.css'; 6 | 7 | const Header = () => ( 8 |

9 |

IFramePlayground

10 | {pkg.version} 11 |

12 | ); 13 | 14 | export default Header; 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docz-iframe-playground", 3 | "version": "1.0.9", 4 | "description": "iframe wrapper for Docz playground", 5 | "main": "./dist/IFramePlayground.min.js", 6 | "keywords": [ 7 | "docz", 8 | "iframe", 9 | "playground", 10 | "docs" 11 | ], 12 | "scripts": { 13 | "start": "docz dev", 14 | "build-docs": "docz build", 15 | "build-lib": "rollup -c rollup.config.js", 16 | "build": "yarn build-docs && yarn build-lib" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/zicodeng/docz-iframe-playground.git" 21 | }, 22 | "author": "Zico Deng", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/zicodeng/docz-iframe-playground/issues" 26 | }, 27 | "homepage": "https://github.com/zicodeng/docz-iframe-playground#readme", 28 | "peerDependencies": { 29 | "docz": "^0.13.7", 30 | "docz-theme-default": "^0.13.7", 31 | "react": "^16.8.6", 32 | "react-dom": "^16.8.6" 33 | }, 34 | "devDependencies": { 35 | "@babel/cli": "^7.4.3", 36 | "@babel/core": "^7.4.3", 37 | "@babel/plugin-proposal-class-properties": "^7.4.0", 38 | "@babel/preset-env": "^7.4.3", 39 | "@babel/preset-react": "^7.0.0", 40 | "classnames": "^2.2.6", 41 | "docz": "^0.13.7", 42 | "docz-plugin-css": "^0.11.0", 43 | "docz-theme-default": "^0.13.7", 44 | "prop-types": "^15.7.2", 45 | "react": "^16.8.6", 46 | "react-dom": "^16.8.6", 47 | "rollup": "^1.10.0", 48 | "rollup-plugin-babel": "^4.3.2", 49 | "rollup-plugin-commonjs": "^9.3.4", 50 | "rollup-plugin-node-resolve": "^4.2.3", 51 | "rollup-plugin-postcss": "^2.0.3", 52 | "rollup-plugin-replace": "^2.2.0", 53 | "rollup-plugin-terser": "^4.0.4" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import resolve from 'rollup-plugin-node-resolve'; 2 | import commonjs from 'rollup-plugin-commonjs'; 3 | import babel from 'rollup-plugin-babel'; 4 | import replace from 'rollup-plugin-replace'; 5 | import postcss from 'rollup-plugin-postcss'; 6 | import { terser } from 'rollup-plugin-terser'; 7 | 8 | import pkg from './package.json'; 9 | 10 | export default { 11 | input: './src/IFramePlayground.jsx', 12 | output: { file: './dist/IFramePlayground.min.js', format: 'esm' }, 13 | plugins: [ 14 | replace({ 15 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), 16 | }), 17 | resolve(), 18 | commonjs(), 19 | babel({ 20 | presets: [ 21 | '@babel/preset-react', 22 | ['@babel/preset-env', { modules: false }], 23 | ], 24 | plugins: ['@babel/plugin-proposal-class-properties'], 25 | babelrc: false, 26 | }), 27 | terser(), 28 | postcss({ 29 | modules: true, 30 | }), 31 | ], 32 | external: Object.keys(pkg.peerDependencies), 33 | }; 34 | -------------------------------------------------------------------------------- /src/IFramePlayground.css: -------------------------------------------------------------------------------- 1 | .playground { 2 | width: 100%; 3 | position: relative; 4 | } 5 | 6 | .iframe { 7 | width: 100%; 8 | border: none; 9 | } 10 | 11 | .resize-controller { 12 | background-color: #ebeef3; 13 | border: 1px solid #d7dce4; 14 | position: absolute; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | } 19 | 20 | .resize-controller::before { 21 | content: ''; 22 | background-color: #bfc7d4; 23 | margin: 2px; 24 | } 25 | 26 | .resize-controller::after { 27 | content: ''; 28 | background-color: #bfc7d4; 29 | margin: 2px; 30 | } 31 | 32 | .height-resize-controller { 33 | height: 20px; 34 | bottom: 0; 35 | left: 0; 36 | flex-direction: column; 37 | transform: translateY(25px); 38 | cursor: row-resize; 39 | } 40 | 41 | .height-resize-controller::before { 42 | width: 25px; 43 | height: 2px; 44 | } 45 | 46 | .height-resize-controller::after { 47 | width: 25px; 48 | height: 2px; 49 | } 50 | 51 | .width-resize-controller { 52 | width: 20px; 53 | height: 100%; 54 | top: 0; 55 | flex-direction: row; 56 | transform: translateX(10px); 57 | cursor: col-resize; 58 | } 59 | 60 | .width-resize-controller::before { 61 | width: 2px; 62 | height: 25px; 63 | } 64 | 65 | .width-resize-controller::after { 66 | width: 2px; 67 | height: 25px; 68 | } -------------------------------------------------------------------------------- /src/IFramePlayground.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import PropTypes from 'prop-types'; 4 | import classNames from 'classnames/bind'; 5 | 6 | import styles from './IFramePlayground.css'; 7 | const cx = classNames.bind(styles); 8 | 9 | class IFramePlayground extends React.Component { 10 | ref = React.createRef(); // 189 | {enableResizing && ( 190 | 191 |

this.handleResizeStart(e, 'vertical')} 194 | style={{ 195 | width, 196 | }} 197 | /> 198 |

this.handleResizeStart(e, 'horizontal')} 201 | style={{ 202 | left: width, 203 | }} 204 | /> 205 | 206 | )} 207 |

208 | ); 209 | } 210 | 211 | componentDidMount() { 212 | const iFrameNode = this.ref.current; 213 | if (iFrameNode) { 214 | iFrameNode.addEventListener('load', this.handleLoad); 215 | } 216 | } 217 | 218 | componentWillMount() { 219 | this.removeEventListeners(); 220 | } 221 | } 222 | 223 | IFramePlayground.propTypes = { 224 | /** 225 | * If enabled, resize controller will be available. 226 | * You can use it to control `` viewport size instead of using Docz Playground resize controller 227 | * */ 228 | enableResizing: PropTypes.bool, 229 | minWidth: PropTypes.number, 230 | minHeight: PropTypes.number, 231 | /** If not provided, default to parent container width */ 232 | maxWidth: PropTypes.number, 233 | maxHeight: PropTypes.number, 234 | }; 235 | 236 | IFramePlayground.defaultProps = { 237 | enableResizing: false, 238 | minWidth: 200, 239 | minHeight: 200, 240 | maxWidth: null, 241 | maxHeight: null, 242 | }; 243 | 244 | export default IFramePlayground; 245 | -------------------------------------------------------------------------------- /test/IFramePlayground.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | name: IFramePlayground 3 | route: / 4 | --- 5 | 6 | import { Playground, PropsTable } from 'docz'; 7 | 8 | import IFramePlayground from './../src/IFramePlayground'; 9 | import Header from './../helpers/Header'; 10 | import TestComponent from './TestComponent'; 11 | 12 |

13 | 14 | ## Demo 15 | 16 | ### You can nest `` under `` 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | ### You can also use standalone `` 26 | 27 | Make sure to turn on `enableResizing` 28 | 29 | 30 | 31 | 32 | 33 | ## API 34 | 35 | 36 | -------------------------------------------------------------------------------- /test/TestComponent.css: -------------------------------------------------------------------------------- 1 | .container { 2 | min-height: 300px; 3 | color: #78909C; 4 | background-color: #FF1744; 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | padding: 20px; 9 | border: 20px solid black; 10 | overflow: auto; 11 | } 12 | 13 | @media only screen and (max-width : 1200px) { 14 | .container { 15 | background-color: #651FFF; 16 | } 17 | } 18 | 19 | @media only screen and (max-height : 1200px) { 20 | .container { 21 | color: #F50057; 22 | } 23 | } 24 | 25 | @media only screen and (max-width : 992px) { 26 | .container { 27 | background-color: #00B0FF; 28 | } 29 | } 30 | 31 | @media only screen and (max-height : 992px) { 32 | .container { 33 | color: #3D5AFE; 34 | } 35 | } 36 | 37 | @media only screen and (max-width : 768px) { 38 | .container { 39 | background-color: #00E676; 40 | } 41 | } 42 | 43 | @media only screen and (max-height : 768px) { 44 | .container { 45 | color: #00E5FF; 46 | } 47 | } 48 | 49 | @media only screen and (max-width : 480px) { 50 | .container { 51 | background-color: #FFEA00; 52 | } 53 | } 54 | 55 | @media only screen and (max-height : 480px) { 56 | .container { 57 | color: #76FF03; 58 | } 59 | } 60 | 61 | @media only screen and (max-width : 320px) { 62 | .container { 63 | background-color: #FF3D00; 64 | } 65 | } 66 | 67 | @media only screen and (max-height : 320px) { 68 | .container { 69 | color: #FFC400; 70 | } 71 | } -------------------------------------------------------------------------------- /test/TestComponent.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import styles from './TestComponent.css'; 5 | 6 | const TestComponent = ({ title, height }) => ( 7 |

8 |

{title}

9 |

10 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa 11 | reprehenderit porro fuga, quas aliquid quia. Labore nostrum autem 12 | temporibus odio corporis, tenetur accusamus rem velit voluptatem eligendi 13 | assumenda quaerat illo? 14 |

15 |

16 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod consectetur 17 | repudiandae accusantium dolor atque fuga odio, animi, natus asperiores 18 | sapiente sint. Suscipit consectetur eveniet reprehenderit non ipsa quia, 19 | voluptatum quas! Lorem ipsum dolor sit amet consectetur adipisicing elit. 20 | Quisquam vitae, itaque laudantium et aliquid voluptates obcaecati quis 21 | repellat nulla quia, officiis ut, iusto ab molestiae quae? Fugiat 22 | obcaecati laborum assumenda! Lorem ipsum dolor sit amet consectetur 23 | adipisicing elit. Labore reiciendis debitis cum ipsam ducimus nobis nihil 24 | consectetur? Ea, dolor assumenda! Nulla voluptatem quod hic eum 25 | consequatur, exercitationem cum error obcaecati. Lorem ipsum dolor sit 26 | amet consectetur adipisicing elit. Natus sapiente incidunt perspiciatis 27 | quasi ex amet a aliquam dolorem laborum asperiores provident nulla, 28 | repudiandae eos sint dignissimos maiores exercitationem consectetur 29 | nesciunt. 30 |

31 |

32 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto 33 | obcaecati, reprehenderit sit rerum vel accusantium necessitatibus. Iure, 34 | fuga dolorum et cumque dicta nulla ducimus est numquam praesentium, 35 | dolorem debitis esse? Lorem ipsum dolor sit, amet consectetur adipisicing 36 | elit. Placeat impedit ea, architecto ullam inventore aperiam neque earum 37 | alias error excepturi illo dolorum asperiores perspiciatis reiciendis ipsa 38 | aliquid nobis molestiae facere! 39 |

40 |

41 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod consectetur 42 | repudiandae accusantium dolor atque fuga odio, animi, natus asperiores 43 | sapiente sint. Suscipit consectetur eveniet reprehenderit non ipsa quia, 44 | voluptatum quas! Lorem ipsum dolor sit amet consectetur adipisicing elit. 45 | Quisquam vitae, itaque laudantium et aliquid voluptates obcaecati quis 46 | repellat nulla quia, officiis ut, iusto ab molestiae quae? Fugiat 47 | obcaecati laborum assumenda! Lorem ipsum dolor sit amet consectetur 48 | adipisicing elit. Labore reiciendis debitis cum ipsam ducimus nobis nihil 49 | consectetur? Ea, dolor assumenda! Nulla voluptatem quod hic eum 50 | consequatur, exercitationem cum error obcaecati. Lorem ipsum dolor sit 51 | amet consectetur adipisicing elit. Natus sapiente incidunt perspiciatis 52 | quasi ex amet a aliquam dolorem laborum asperiores provident nulla, 53 | repudiandae eos sint dignissimos maiores exercitationem consectetur 54 | nesciunt. 55 |

56 |

57 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis 58 | consequuntur soluta officiis at, sit placeat illo asperiores eum porro 59 | quas adipisci, voluptatibus dolor alias quis. Tempore eveniet ab ipsa 60 | mollitia. Lorem ipsum dolor sit amet consectetur adipisicing elit. Est 61 | dolor quod quidem, ea suscipit alias tempora nemo exercitationem aut 62 | delectus vitae sapiente vero molestiae perferendis ipsum eum harum, 63 | inventore numquam! Lorem, ipsum dolor sit amet consectetur adipisicing 64 | elit. Iure eius cupiditate eum, adipisci voluptate doloremque dolores 65 | ipsam, vero nesciunt ullam facere veritatis inventore? Aspernatur eum 66 | magnam quaerat odit numquam placeat! Lorem ipsum, dolor sit amet 67 | consectetur adipisicing elit. Provident expedita molestias facilis 68 | laudantium, magnam officiis? Rem, enim? Ab nulla aliquid soluta aut. 69 | Officiis quasi consequuntur saepe totam est, odio sed! Lorem ipsum dolor 70 | sit amet consectetur adipisicing elit. Quis ab fugit sequi repellendus. 71 | Nulla officia, pariatur eveniet aut, ullam quis fuga perspiciatis ipsam 72 | deleniti sapiente perferendis vitae ut eos inventore? Lorem ipsum dolor 73 | sit, amet consectetur adipisicing elit. Cum reiciendis consequatur facere 74 | ut quas deleniti aut eum sequi excepturi officia temporibus quos odio, 75 | expedita est nihil! Dolore error facilis eum. 76 |

77 |

78 | ); 79 | 80 | TestComponent.propTypes = { 81 | height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 82 | title: PropTypes.string, 83 | }; 84 | 85 | TestComponent.defaultProps = { 86 | height: 300, 87 | }; 88 | 89 | export default TestComponent; 90 | --------------------------------------------------------------------------------