Skip to content
This repository was archived by the owner on Nov 21, 2025. It is now read-only.

Commit 9c5082e

Browse files
rakannimerrakannimer
authored
feat(gatsby-theme-docz): add optional iframe for preview and ed… (#1305)
* feat(gatsby-theme-docz): add optional iframe for preview and editor * feat(gatsby-theme-docz): add useScopingInPlayground in theme config * docs: add example with styled components and scoping (#1306) - @lkuechler
1 parent 8d1ae9e commit 9c5082e

15 files changed

Lines changed: 449 additions & 41 deletions

File tree

‎core/gatsby-theme-docz/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,10 @@
4141
"prop-types": "^15.7.2",
4242
"re-resizable": "^6.1.0",
4343
"react-feather": "^2.0.3",
44+
"react-frame-component": "^4.1.1",
4445
"react-helmet-async": "^1.0.4",
4546
"react-live": "^2.2.1",
47+
"react-resize-detector": "^4.2.1",
4648
"rehype-docz": "^2.1.0",
4749
"rehype-slug": "^2.0.3",
4850
"remark-docz": "^2.1.0",

‎core/gatsby-theme-docz/src/components/Playground/IframeWrapper.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/** @jsx jsx */
2+
import { jsx } from 'theme-ui'
3+
import Iframe from 'react-frame-component'
4+
5+
import * as styles from './styles'
6+
7+
const CLEAR_PADDING = `<style> body { padding: 0; margin: 0; } </style>`
8+
const INITIAL_IFRAME_CONTENT = `<!DOCTYPE html><html><head> ${CLEAR_PADDING} </head><body><div></div></body></html>`
9+
10+
export const IframeWrapper = ({ children, height, style = {} }) => {
11+
return (
12+
<Iframe
13+
initialContent={INITIAL_IFRAME_CONTENT}
14+
sx={{
15+
...styles.previewInner(),
16+
height,
17+
...style,
18+
}}
19+
>
20+
{children}
21+
</Iframe>
22+
)
23+
}

‎core/gatsby-theme-docz/src/components/Playground/index.js‎

Lines changed: 74 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,79 @@
11
/** @jsx jsx */
22
import { jsx } from 'theme-ui'
3-
import { useState } from 'react'
3+
import React from 'react'
44
import { useConfig } from 'docz'
55
import { LiveProvider, LiveError, LivePreview, LiveEditor } from 'react-live'
66
import { Resizable } from 're-resizable'
77
import copy from 'copy-text-to-clipboard'
8+
import ReactResizeDetector from 'react-resize-detector'
89

10+
import { IframeWrapper } from './IframeWrapper'
911
import { usePrismTheme } from '~utils/theme'
1012
import * as styles from './styles'
1113
import * as Icons from '../Icons'
1214

15+
const getResizableProps = (width, setWidth) => ({
16+
minWidth: 260,
17+
maxWidth: '100%',
18+
size: {
19+
width: width,
20+
height: 'auto',
21+
},
22+
style: {
23+
margin: 0,
24+
marginRight: 'auto',
25+
},
26+
enable: {
27+
top: false,
28+
right: true,
29+
bottom: false,
30+
left: false,
31+
topRight: false,
32+
bottomRight: false,
33+
bottomLeft: false,
34+
topLeft: false,
35+
},
36+
onResizeStop: (e, direction, ref) => {
37+
setWidth(ref.style.width)
38+
},
39+
})
40+
1341
const transformCode = code => {
1442
if (code.startsWith('()') || code.startsWith('class')) return code
1543
return `<React.Fragment>${code}</React.Fragment>`
1644
}
1745

18-
export const Playground = ({ code, scope, language }) => {
46+
export const Playground = ({ code, scope, language, useScoping = false }) => {
1947
const {
20-
themeConfig: { showPlaygroundEditor, showLiveError, showLivePreview },
48+
themeConfig: {
49+
showPlaygroundEditor,
50+
showLiveError,
51+
showLivePreview,
52+
useScopingInPlayground,
53+
},
2154
} = useConfig()
55+
56+
const [previewHeight, setPreviewHeight] = React.useState()
57+
const [editorHeight, setEditorHeight] = React.useState()
58+
const Wrapper = React.useCallback(
59+
useScoping || useScopingInPlayground
60+
? props => <IframeWrapper {...props}>{props.children}</IframeWrapper>
61+
: props => (
62+
<div sx={styles.previewInner(showingCode)}>{props.children}</div>
63+
),
64+
[useScoping]
65+
)
66+
2267
// Makes sure scope is only given on mount to avoid infinite re-render on hot reloads
23-
const [scopeOnMount] = useState(scope)
68+
const [scopeOnMount] = React.useState(scope)
2469
const theme = usePrismTheme()
25-
const [showingCode, setShowingCode] = useState(() => showPlaygroundEditor)
26-
const [width, setWidth] = useState(() => '100%')
70+
const [showingCode, setShowingCode] = React.useState(showPlaygroundEditor)
71+
const [width, setWidth] = React.useState('100%')
72+
const resizableProps = getResizableProps(width, setWidth)
2773

2874
const copyCode = () => copy(code)
29-
3075
const toggleCode = () => setShowingCode(s => !s)
3176

32-
const resizableProps = {
33-
minWidth: 260,
34-
maxWidth: '100%',
35-
size: {
36-
width,
37-
height: 'auto',
38-
},
39-
style: {
40-
margin: 0,
41-
marginRight: 'auto',
42-
},
43-
enable: {
44-
top: false,
45-
right: true,
46-
bottom: false,
47-
left: false,
48-
topRight: false,
49-
bottomRight: false,
50-
bottomLeft: false,
51-
topLeft: false,
52-
},
53-
onResizeStop: (e, direction, ref) => {
54-
setWidth(ref.style.width)
55-
},
56-
}
57-
5877
return (
5978
<Resizable {...resizableProps} data-testid="playground">
6079
<LiveProvider
@@ -65,11 +84,17 @@ export const Playground = ({ code, scope, language }) => {
6584
theme={theme}
6685
>
6786
<div sx={styles.previewWrapper}>
68-
<div sx={styles.previewInner(showingCode)}>
87+
<Wrapper height={previewHeight}>
6988
{showLivePreview && (
70-
<LivePreview sx={styles.preview} data-testid="live-preview" />
89+
<LivePreview style={styles.preview} data-testid="live-preview" />
7190
)}
72-
</div>
91+
<ReactResizeDetector
92+
handleHeight
93+
onResize={(width, height) => {
94+
setPreviewHeight(height)
95+
}}
96+
/>
97+
</Wrapper>
7398
<div sx={styles.buttons}>
7499
<button sx={styles.button} onClick={copyCode}>
75100
<Icons.Clipboard size={12} />
@@ -79,14 +104,22 @@ export const Playground = ({ code, scope, language }) => {
79104
</button>
80105
</div>
81106
</div>
107+
{showingCode && (
108+
<Wrapper height={editorHeight}>
109+
<div style={styles.editor(theme)}>
110+
<LiveEditor data-testid="live-editor" />
111+
</div>
112+
<ReactResizeDetector
113+
handleHeight
114+
onResize={(width, height) => {
115+
setEditorHeight(height)
116+
}}
117+
/>
118+
</Wrapper>
119+
)}
82120
{showLiveError && (
83121
<LiveError sx={styles.error} data-testid="live-error" />
84122
)}
85-
{showingCode && (
86-
<div sx={styles.editor(theme)}>
87-
<LiveEditor data-testid="live-editor" />
88-
</div>
89-
)}
90123
</LiveProvider>
91124
</Resizable>
92125
)

‎core/gatsby-theme-docz/src/theme/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ export default merge(typography, {
2121
showDarkModeSwitch: true,
2222
// Display edit this page button on every page
2323
showMarkdownEditButton: true,
24+
// Wrap the playground editor and preview in iframes to avoid style/script collisions
25+
useScopingInPlayground: false,
2426
colors: {
2527
...modes.light,
2628
modes: {

‎examples/with-styled-components-and-scoping/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.docz
2+
node_modules

‎examples/with-styled-components-and-scoping/README.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Docz Styled Components Example
2+
3+
## Using `create-docz-app`
4+
5+
```sh
6+
npx create-docz-app docz-app-styled-docz --example with-styled-components-and-scoping
7+
# or
8+
yarn create docz-app docz-app-styled-docz --example with-styled-components-and-scoping
9+
```
10+
11+
## Download manually
12+
13+
```sh
14+
curl https://codeload.github.com/doczjs/docz/tar.gz/master | tar -xz --strip=2 docz-master/examples/with-styled-components-and-scoping
15+
mv with-styled-components-and-scoping docz-example-styled-docz
16+
```
17+
18+
## Setup
19+
20+
```sh
21+
yarn # npm i
22+
```
23+
24+
## Run
25+
26+
```sh
27+
yarn dev # npm run dev
28+
```
29+
30+
## Build
31+
32+
```sh
33+
yarn build # npm run build
34+
```
35+
36+
## Serve built app
37+
38+
```sh
39+
yarn serve # npm run serve
40+
```
41+
42+
## Deploy
43+
44+
```sh
45+
yarn deploy
46+
```
47+
48+
Note that by default `docz` generates the output site in `.docz/public` to change that add a `dest` field to your `doczrc.js` with the path you want to generate the code in.

‎examples/with-styled-components-and-scoping/doczrc.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
themeConfig: {
3+
useScopingInPlayground: true,
4+
},
5+
}

‎examples/with-styled-components-and-scoping/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"private": true,
3+
"name": "docz-example-styled-components-with-scoping",
4+
"version": "2.0.0-rc.41",
5+
"license": "MIT",
6+
"files": [
7+
"src/",
8+
"package.json"
9+
],
10+
"scripts": {
11+
"dev": "docz dev",
12+
"build": "docz build"
13+
},
14+
"dependencies": {
15+
"docz": "latest",
16+
"prop-types": "^15.7.2",
17+
"react": "^16.8.6",
18+
"react-dom": "^16.8.6",
19+
"react-frame-component": "^4.1.1",
20+
"styled-components": "^4.3.2"
21+
}
22+
}

‎examples/with-styled-components-and-scoping/src/components/Alert.jsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
import t from 'prop-types'
4+
5+
const kinds = {
6+
info: '#5352ED',
7+
positive: '#2ED573',
8+
negative: '#FF4757',
9+
warning: '#FFA502',
10+
}
11+
12+
const AlertStyled = styled('div')`
13+
padding: 15px 20px;
14+
background: white;
15+
border-radius: 3px;
16+
color: white;
17+
background: ${({ kind = 'info' }) => kinds[kind]};
18+
`
19+
20+
export const Alert = props => <AlertStyled {...props} />
21+
22+
Alert.propTypes = {
23+
kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
24+
}
25+
26+
Alert.defaultProps = {
27+
kind: 'info',
28+
}

‎examples/with-styled-components-and-scoping/src/components/Alert.mdx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
name: Alert
3+
menu: Components
4+
---
5+
6+
import { Playground, Props } from 'docz'
7+
import { Alert } from './Alert'
8+
9+
# Alert
10+
11+
## Properties
12+
13+
<Props of={Alert} />
14+
15+
## Basic usage
16+
17+
<Playground>
18+
<Alert>Some message</Alert>
19+
</Playground>
20+
21+
## Using different kinds
22+
23+
<Playground>
24+
<Alert kind="info">Some message</Alert>
25+
<Alert kind="positive">Some message</Alert>
26+
<Alert kind="negative">Some message</Alert>
27+
<Alert kind="warning">Some message</Alert>
28+
</Playground>

0 commit comments

Comments
 (0)