Skip to content

Commit

Permalink
update synthax highlight and remove package
Browse files Browse the repository at this point in the history
  • Loading branch information
wcastand committed Apr 27, 2017
1 parent 7fb3ff5 commit 98af185
Show file tree
Hide file tree
Showing 8 changed files with 610 additions and 171 deletions.
2 changes: 1 addition & 1 deletion example/.storybook/addons.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import '../../register'
import '@kadira/storybook/addons'
import '@kadira/storybook-addon-options/register'
import '../../register'
7 changes: 5 additions & 2 deletions example/stories/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,15 @@ storiesOf('test', module)
'Paris',
() => (
<Test fontSize={45} fontFamily="Roboto" align="center" color="#CAF200">
Hello
<Test />
<Test>Hello</Test>
</Test>
),
{ displayName: 'Testeru' },
)
.addWithJSX('Orleans', () => <Test color="#236544">Hello</Test>)
.addWithJSX('Orleans', () => (
<Test align="test" font={['test', 't', 'test']} />
))

storiesOf('test 2', module).addWithJSX(
'Paris',
Expand Down
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
},
"dependencies": {
"jsx-to-string": "^1.1.0",
"prismjs": "^1.6.0",
"react-copy-to-clipboard": "^4.3.1"
}
}
60 changes: 60 additions & 0 deletions src/jsx.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import React, { Component } from 'react'
import Prism from './prism.min'

import globalStyle from './css'

const prismStyle = document.createElement('style')
prismStyle.innerHTML = globalStyle
document.body.appendChild(prismStyle)

export default class JSX extends Component {
constructor(props, ...args) {
super(props, ...args)
props.ob({
next: type =>
(type === 'jsx'
? this.onAddJSX.bind(this)
: this.setCurrent.bind(this)),
})

this.state = {}
this.stopListeningOnStory = () => this.setState({})
}

setCurrent(kind, story) {
this.setState({ current: { kind, story } })
}

onAddJSX(kind, story, jsx) {
const state = this.state

if (typeof state[kind] === 'undefined') {
state[kind] = {}
}
state[kind][story] = jsx
this.setState(state)
}
render() {
if (
typeof this.state.current !== 'undefined' &&
typeof this.state[this.state.current.kind] !== 'undefined'
) {
const current = this.state.current
const code = this.state[current.kind][current.story]
const jsx = code ? Prism.highlight(code, Prism.languages.jsx) : ''

return (
<pre style={styles.pre} dangerouslySetInnerHTML={{ __html: jsx }} />
)
} else {
return <pre style={styles.pre} />
}
}
}

const styles = {
pre: {
flex: 1,
padding: '5px 15px',
},
}
Loading

0 comments on commit 98af185

Please sign in to comment.