Skip to content

Commit 1e0147d

Browse files
foryukiforyuki
committed
feat: first implement
1 parent 09d5960 commit 1e0147d

File tree

17 files changed

+195
-241
lines changed

17 files changed

+195
-241
lines changed

‎examples/.storybook/config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { configure } from '@storybook/react'
2-
import { setOptions } from '@storybook/addon-options'
2+
import { withOptions } from '@storybook/addon-options'
33

4-
setOptions({
4+
withOptions({
55
name: 'One React',
66
url: 'https://github.com/one-react/code-previewer',
77
goFullScreen: false,

‎examples/package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,17 @@
1111
"license": "MIT",
1212
"devDependencies": {
1313
"@babel/core": "^7.0.1",
14-
"@storybook/addon-info": "^3.4.10",
15-
"@storybook/addon-options": "^3.4.10",
16-
"@storybook/react": "^3.4.10",
14+
"@storybook/addon-actions": "^4.0.0-alpha.23",
15+
"@storybook/addon-info": "^4.0.0-alpha.23",
16+
"@storybook/addon-options": "^4.0.0-alpha.23",
17+
"@storybook/react": "^4.0.0-alpha.23",
1718
"@types/storybook__addon-actions": "^3.4.1",
1819
"@types/storybook__addon-info": "^3.4.2",
1920
"@types/storybook__react": "^3.0.9",
2021
"babel-loader": "^8.0.2",
2122
"css-loader": "^1.0.0",
2223
"node-sass": "^4.7.2",
24+
"raw-loader": "^0.5.1",
2325
"react-docgen-typescript-loader": "^3.0.0",
2426
"sass-loader": "^7.1.0",
2527
"style-loader": "^0.23.0",

‎examples/stories/example.tsx‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,10 @@
1-
import { action } from '@storybook/addon-actions'
2-
import Sample from 'or-code-previewer'
1+
import CodePreviewer from 'or-code-previewer'
32
import React, { PureComponent } from 'react'
43

5-
const handleClick = action('sample-click')
6-
74
export default class Example extends PureComponent<{}, {}> {
85
render() {
96
return (
10-
<div>
11-
<h1>button type:</h1>
12-
<div>
13-
<Sample type="primary" onClick={handleClick}>
14-
ADD TO CART
15-
</Sample>
16-
<Sample onClick={handleClick}>SIGN UP</Sample>
17-
<Sample type="warning" onClick={handleClick}>
18-
DELETE
19-
</Sample>
20-
<Sample onClick={handleClick}>TOO LOOOOOOOOOOOOOOOOOOG</Sample>
21-
</div>
22-
</div>
7+
<CodePreviewer title="Hello world" lang="jsx" code={`<Component title="123" />`} />
238
)
249
}
2510
}

‎examples/stories/index.story.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,18 @@ import { withInfo } from '@storybook/addon-info'
33
import { storiesOf } from '@storybook/react'
44
import React from 'react'
55

6-
import Sample from 'or-code-previewer'
6+
import CodePreviewer from 'or-code-previewer'
77
import { previewCode } from './util'
88

99
import Example from './example'
1010

1111
import './styles.scss'
1212

13-
const handleClick = action('basic-click')
1413
storiesOf('or-sample', module)
1514
.addDecorator(
1615
withInfo({
1716
inline: true,
18-
propTables: [Sample],
17+
propTables: [CodePreviewer],
1918
propTablesExclude: [Example],
2019
styles: {
2120
jsxInfoContent: {
@@ -25,7 +24,11 @@ storiesOf('or-sample', module)
2524
}
2625
})
2726
)
28-
.add('basic', () => <Sample onClick={handleClick}>Test</Sample>)
27+
.add('basic', () => <CodePreviewer title="hello" lang="html" code={require('!!raw-loader!./test.html')} />, {
28+
info: {
29+
source: false
30+
}
31+
})
2932
.add('sample', () => <Example />, {
3033
info: {
3134
source: false,

‎examples/stories/styles.scss‎

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,3 @@
22
margin-left: 20px;
33
margin-bottom: 20px;
44
}
5-
6-
// styles for code previewer
7-
.code-previewer {
8-
position: relative;
9-
10-
&-title {
11-
margin-bottom: 0;
12-
padding-bottom: 5px;
13-
border-bottom: 1px solid rgb(238, 238, 238);
14-
}
15-
16-
.copy-btn {
17-
position: absolute;
18-
top: 75px;
19-
right: 10px;
20-
background-color: rgb(255, 255, 255);
21-
cursor: pointer;
22-
font-size: 13px;
23-
align-self: flex-start;
24-
flex-shrink: 0;
25-
overflow: hidden;
26-
border-width: 1px;
27-
border-style: solid;
28-
border-color: rgb(238, 238, 238);
29-
border-image: initial;
30-
border-radius: 3px;
31-
padding: 3px 10px;
32-
33-
&-text {
34-
height: 16px;
35-
transform: translateY(-100%) translateY(-6px);
36-
transition: transform .2s ease;
37-
}
38-
39-
&-copied {
40-
transform: translateY(0);
41-
}
42-
}
43-
}

‎examples/stories/test.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<html>
2+
<head>
3+
<title>hello</title>
4+
</head>
5+
<body>
6+
<div>world</div>
7+
</body>
8+
</html>

‎examples/stories/util.tsx‎

Lines changed: 4 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,7 @@
1-
import clx from 'classnames'
2-
import React, { PureComponent } from 'react'
3-
import CopyToClipboard from 'react-copy-to-clipboard'
4-
import Highlight from 'react-highlight'
1+
import React from 'react'
52

6-
import 'highlight.js/styles/atom-one-light.css'
3+
import CodePreviewer from 'or-code-previewer'
74

8-
class CopyBtn extends PureComponent<
9-
{
10-
source: string
11-
},
12-
{
13-
copied: boolean
14-
}
15-
> {
16-
timeoutId: NodeJS.Timer
17-
18-
state = {
19-
copied: false
20-
}
21-
22-
render() {
23-
const { copied } = this.state
24-
return (
25-
<CopyToClipboard text={this.props.source} onCopy={this.handleCopy}>
26-
<button className="copy-btn">
27-
<div className={clx('copy-btn-text', { 'copy-btn-copied': copied })}>
28-
<div style={{ marginBottom: 6 }}>Copied!</div>
29-
<div>Copy</div>
30-
</div>
31-
</button>
32-
</CopyToClipboard>
33-
)
34-
}
35-
36-
handleCopy = () => {
37-
if (this.timeoutId) {
38-
clearTimeout(this.timeoutId)
39-
}
40-
41-
this.setState(
42-
{
43-
copied: true
44-
},
45-
() => {
46-
this.timeoutId = setTimeout(() => {
47-
this.setState({ copied: false })
48-
}, 2000)
49-
}
50-
)
51-
}
52-
}
53-
54-
export function previewCode(source: string, lang: string = 'tsx'): any {
55-
return (
56-
<div className="code-previewer">
57-
<h1 className="code-previewer-title">Story Source</h1>
58-
<CopyBtn source={source} />
59-
<Highlight className={lang}>{source}</Highlight>
60-
</div>
61-
)
5+
export function previewCode(code: string): any {
6+
return <CodePreviewer title="Story Source" lang="tsx" code={code} />
627
}

‎examples/tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"compilerOptions": {
44
"baseUrl": ".",
55
"paths": {
6-
"or-sample": [
6+
"or-code-previewer": [
77
"../src"
88
]
99
}

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,9 @@
6565
},
6666
"dependencies": {
6767
"classnames": "^2.2.6",
68-
"or-theme": "^1.2.0"
68+
"or-theme": "^1.2.0",
69+
"react-copy-to-clipboard": "^5.0.1",
70+
"react-highlight": "^0.12.0"
6971
},
7072
"peerDependencies": {
7173
"react": ">=15.5"

‎src/CodePreviewer.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import clx from 'classnames'
2+
import React, { PureComponent } from 'react'
3+
import CopyToClipboard from 'react-copy-to-clipboard'
4+
import Highlight from 'react-highlight'
5+
6+
import 'highlight.js/styles/atom-one-light.css'
7+
8+
class CopyBtn extends PureComponent<
9+
{
10+
source: string
11+
},
12+
{
13+
copied: boolean
14+
}
15+
> {
16+
timeoutId: NodeJS.Timer
17+
18+
state = {
19+
copied: false
20+
}
21+
22+
render() {
23+
const { copied } = this.state
24+
return (
25+
<CopyToClipboard text={this.props.source} onCopy={this.handleCopy}>
26+
<button className="copy-btn">
27+
<div className={clx('copy-btn-text', { 'copy-btn-copied': copied })}>
28+
<div style={{ marginBottom: 6 }}>Copied!</div>
29+
<div>Copy</div>
30+
</div>
31+
</button>
32+
</CopyToClipboard>
33+
)
34+
}
35+
36+
handleCopy = () => {
37+
if (this.timeoutId) {
38+
clearTimeout(this.timeoutId)
39+
}
40+
41+
this.setState(
42+
{
43+
copied: true
44+
},
45+
() => {
46+
this.timeoutId = setTimeout(() => {
47+
this.setState({ copied: false })
48+
}, 2000)
49+
}
50+
)
51+
}
52+
}
53+
54+
interface Props {
55+
/**
56+
* source code as text
57+
*/
58+
code: string;
59+
/**
60+
* lang of source code
61+
*/
62+
lang: string;
63+
/**
64+
* title on the top of sourc code
65+
*/
66+
title?: string;
67+
}
68+
69+
export class CodePreviewer extends PureComponent<Props, {}> {
70+
render() {
71+
const { title, code, lang } = this.props
72+
return (
73+
<div className="or-code-previewer">
74+
{ title && <h1 className="or-code-previewer-title">{title}</h1> }
75+
<CopyBtn source={code} />
76+
<Highlight className={lang}>{code}</Highlight>
77+
</div>
78+
)
79+
}
80+
}

0 commit comments

Comments
 (0)