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

Commit e04452e

Browse files
pedronauckpedronauck
committed
feat(docz-theme-default): add responsive mode for playground
1 parent 00f096f commit e04452e

File tree

6 files changed

+132
-39
lines changed

6 files changed

+132
-39
lines changed

‎packages/docz-theme-default/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"match-sorter": "^2.2.3",
3030
"polished": "^1.9.3",
3131
"prop-types": "15.6.2",
32+
"re-resizable": "^4.7.1",
3233
"react": "^16.2.0",
3334
"react-adopt": "^0.6.0",
3435
"react-breakpoints": "^3.0.0",

‎packages/docz-theme-default/src/components/ui/Pre.tsx

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import * as React from 'react'
22
import { SFC, Component, Fragment } from 'react'
33
import { ThemeConfig } from 'docz'
4-
import styled, { css, cx } from 'react-emotion'
4+
import styled, { cx } from 'react-emotion'
55
import rgba from 'polished/lib/color/rgba'
6-
import Check from 'react-feather/dist/icons/check'
6+
import BaseCheck from 'react-feather/dist/icons/check'
77
import SyntaxHighlighter from 'react-syntax-highlighter/prism-light'
88
import Clipboard from 'react-feather/dist/icons/clipboard'
99
import copy from 'copy-text-to-clipboard'
@@ -72,27 +72,20 @@ export const ActionButton = styled(ButtonSwap)`
7272
}
7373
`
7474

75-
export const ClipboardAction: SFC<{ content: string }> = ({ content }) => {
76-
const check = (
77-
<Check
78-
width={17}
79-
className={css`
80-
stroke: #00b894;
81-
`}
82-
/>
83-
)
84-
85-
return (
86-
<ActionButton
87-
as={ButtonLink}
88-
title="Copy to clipboard"
89-
onClick={() => copy(content)}
90-
swap={check}
91-
>
92-
<Clipboard width={15} />
93-
</ActionButton>
94-
)
95-
}
75+
const Check = styled(BaseCheck)`
76+
stroke: ${p => p.theme.colors.primary};
77+
`
78+
79+
export const ClipboardAction: SFC<{ content: string }> = ({ content }) => (
80+
<ActionButton
81+
as={ButtonLink}
82+
title="Copy to clipboard"
83+
onClick={() => copy(content)}
84+
swap={<Check width={17} />}
85+
>
86+
<Clipboard width={15} />
87+
</ActionButton>
88+
)
9689

9790
const Nullable: SFC = ({ children }) => <Fragment>{children}</Fragment>
9891

‎packages/docz-theme-default/src/components/ui/Render.tsx

Lines changed: 107 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,126 @@
11
import * as React from 'react'
22
import { Fragment } from 'react'
33
import { RenderComponent } from 'docz'
4-
import styled from 'react-emotion'
4+
import { Toggle } from 'react-powerplug'
5+
import lighten from 'polished/lib/color/lighten'
6+
import darken from 'polished/lib/color/darken'
7+
import Resizable from 're-resizable'
8+
import Maximize from 'react-feather/dist/icons/maximize'
9+
import Minimize from 'react-feather/dist/icons/minimize'
10+
import styled, { css } from 'react-emotion'
511

6-
import { Pre as PreBase } from './Pre'
12+
import { Pre as PreBase, ActionButton, ClipboardAction } from './Pre'
13+
14+
const HANDLE_WIDTH = 24
15+
16+
interface WrapperProps {
17+
full: boolean
18+
}
19+
20+
const Wrapper = styled('div')`
21+
display: flex;
22+
flex-direction: column;
23+
z-index: ${(p: WrapperProps) => (p.full ? 99999 : 0)};
24+
position: ${(p: WrapperProps) => (p.full ? 'fixed' : 'initial')};
25+
top: 0;
26+
left: 0;
27+
height: ${(p: WrapperProps) => (p.full ? '100vh' : '100%')};
28+
width: ${(p: WrapperProps) =>
29+
p.full ? '100vw' : `calc(100% - ${HANDLE_WIDTH - 4}px)`};
30+
`
731

832
const Playground = styled('div')`
9-
background: 'white';
33+
flex: 1;
34+
background: ${p => p.theme.colors.background};
1035
border: 1px solid ${p => p.theme.colors.border};
11-
border-bottom: 0;
12-
border-radius: 5px 5px 0 0;
36+
border-radius: 4px 4px 0 0;
1337
${p => p.theme.mq(p.theme.styles.playground)};
1438
`
1539

1640
const Pre = styled(PreBase)`
1741
margin: 0;
18-
border-radius: 0 0 5px 5px;
42+
border-radius: ${(p: WrapperProps) => (p.full ? 0 : '0 0 4px 4px')};
43+
border-top: 0;
44+
`
45+
46+
const line = (color: string, left: string) => css`
47+
position: absolute;
48+
display: block;
49+
top: 50%;
50+
left: ${left};
51+
content: '';
52+
width: 2px;
53+
height: 25px;
54+
background: ${color};
55+
transform: translate(-50%, -50%);
56+
`
57+
58+
const Handle = styled('div')`
59+
position: absolute;
60+
top: 0;
61+
right: 0;
62+
display: block;
63+
width: ${HANDLE_WIDTH}px;
64+
height: 100%;
65+
border: 1px solid ${p => p.theme.colors.border};
66+
border-radius: 0 4px 4px 0;
67+
background: ${p =>
68+
p.theme.mode === 'light'
69+
? lighten(0.1, p.theme.colors.border)
70+
: darken(0.1, p.theme.colors.border)};
71+
72+
&:after {
73+
${p => line(p.theme.colors.border, 'calc(50% + 3px)')};
74+
}
75+
76+
&:before {
77+
${p => line(p.theme.colors.border, 'calc(50% - 3px)')};
78+
}
1979
`
2080

2181
export const Render: RenderComponent = ({
2282
className,
2383
style,
2484
component,
2585
rawCode,
26-
}) => {
27-
return (
28-
<Fragment>
29-
<Playground className={className} style={style}>
30-
{component}
31-
</Playground>
32-
<Pre>{rawCode}</Pre>
33-
</Fragment>
34-
)
35-
}
86+
}) => (
87+
<Toggle>
88+
{({ on, toggle }: any) => {
89+
const actions = (
90+
<Fragment>
91+
<ActionButton onClick={toggle} title={on ? 'Minimize' : 'Maximize'}>
92+
{on ? <Minimize width={15} /> : <Maximize width={15} />}
93+
</ActionButton>
94+
<ClipboardAction content={rawCode} />
95+
</Fragment>
96+
)
97+
98+
return (
99+
<Resizable
100+
minWidth={320}
101+
maxWidth="100%"
102+
enable={{
103+
top: false,
104+
right: true,
105+
bottom: false,
106+
left: false,
107+
topRight: false,
108+
bottomRight: false,
109+
bottomLeft: false,
110+
topLeft: false,
111+
}}
112+
>
113+
<Wrapper full={on}>
114+
<Playground className={className} style={style}>
115+
{component}
116+
</Playground>
117+
<Pre actions={actions} full={on}>
118+
{rawCode}
119+
</Pre>
120+
{!on && <Handle />}
121+
</Wrapper>
122+
</Resizable>
123+
)
124+
}}
125+
</Toggle>
126+
)

‎packages/docz-theme-default/src/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ const transform = ({ mode, ...config }: any) => {
5555

5656
return {
5757
...config,
58+
mode,
5859
prismTheme: (prismThemes as any)[mode],
5960
colors: {
6061
...selectedMode,

‎packages/docz-theme-default/src/types.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,12 @@ declare module 'react-feather/dist/icons/chevron-down'
44
declare module 'react-feather/dist/icons/search'
55
declare module 'react-feather/dist/icons/clipboard'
66
declare module 'react-feather/dist/icons/check'
7+
declare module 'react-feather/dist/icons/maximize'
8+
declare module 'react-feather/dist/icons/minimize'
79
declare module 'react-lightweight-tooltip'
810
declare module 'react-powerplug'
911
declare module 'react-syntax-highlighter/prism-light'
12+
declare module 're-resizable'
1013
declare module 'match-sorter'
1114
declare module 'polished/lib/color/rgba'
1215
declare module 'webfontloader'

‎yarn.lock

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9557,6 +9557,10 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
95579557
minimist "^1.2.0"
95589558
strip-json-comments "~2.0.1"
95599559

9560+
re-resizable@^4.7.1:
9561+
version "4.7.1"
9562+
resolved "https://registry.npmjs.org/re-resizable/-/re-resizable-4.7.1.tgz#3eca5bb94a6059d14311786cfd2d430bc9f7fba0"
9563+
95609564
react-adopt@^0.6.0:
95619565
version "0.6.0"
95629566
resolved "https://registry.npmjs.org/react-adopt/-/react-adopt-0.6.0.tgz#e5ff903a655d3082217f82bc9d5033a4b64fafad"

0 commit comments

Comments
 (0)