-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add marko support to storybooksJS #3504
Changes from 7 commits
51d725a
6e6bc01
8c5549e
3807654
bb20d63
d44022f
7a09fd3
26d71a0
d09c83f
d99b440
7a34592
621c62f
35b5e9b
727e14d
c85a9d7
b0dd82c
4e7018d
de43701
04bdf98
2f4a45d
732c6d4
d2859d2
067caf8
f00a369
46de88c
1acf55f
d92851f
cb6f795
24bdcfc
ddb7bed
e9df6b6
d8e0673
554f4f1
d752981
55750a1
d25429a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
module.exports = require('./dist/marko'); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
class { | ||
|
||
onCreate(input) { | ||
this.props = input.props; | ||
this.knobChanged = this.knobChanged.bind(this); | ||
this.knobClicked = this.knobClicked.bind(this); | ||
this.resetKnobs = this.resetKnobs.bind(this); | ||
this.setPaneKnobs = this.setPaneKnobs.bind(this); | ||
} | ||
|
||
onMount() { | ||
// Watch for changes in knob editor. | ||
this.props.channel.on('addon:knobs:knobChange', this.knobChanged); | ||
// Watch for clicks in knob editor. | ||
this.props.channel.on('addon:knobs:knobClick', this.knobClicked); | ||
// Watch for the reset event and reset knobs. | ||
this.props.channel.on('addon:knobs:reset', this.resetKnobs); | ||
// Watch for any change in the knobStore and set the panel again for those changes. | ||
this.props.knobStore.subscribe(this.setPaneKnobs); | ||
// Set knobs in the panel for the first time. | ||
this.setPaneKnobs(); | ||
} | ||
|
||
onDestroy() { | ||
this.props.channel.removeListener('addon:knobs:knobChange', this.knobChanged); | ||
this.props.channel.removeListener('addon:knobs:knobClick', this.knobClicked); | ||
this.props.channel.removeListener('addon:knobs:reset', this.resetKnobs); | ||
this.props.knobStore.unsubscribe(this.setPaneKnobs); | ||
} | ||
|
||
setPaneKnobs(timestamp = +new Date()) { | ||
const { channel, knobStore } = this.props; | ||
channel.emit('addon:knobs:setKnobs', { knobs: knobStore.getAll(), timestamp }); | ||
} | ||
|
||
knobChanged(change) { | ||
const { name, value } = change; | ||
const { knobStore, storyFn, context } = this.props; | ||
|
||
// Update the related knob and it's value. | ||
var knobOptions = knobStore.get(name); | ||
knobOptions.value = value; | ||
knobStore.markAllUnused(); | ||
|
||
this.renderElement(storyFn(context)); | ||
} | ||
|
||
knobClicked(clicked) { | ||
let knobOptions = this.props.knobStore.get(clicked.name); | ||
knobOptions.callback(); | ||
} | ||
|
||
resetKnobs() { | ||
const { knobStore, storyFn, context } = this.props; | ||
knobStore.reset(); | ||
this.renderElement(storyFn(context)); | ||
this.setPaneKnobs(false); | ||
} | ||
|
||
renderElement(storyContent) { | ||
var WrapperElm = document.getElementById('Wrapper'); | ||
if(this.currLoadedComponent) { | ||
this.currLoadedComponent.destroy(); | ||
this.currLoadedComponent = null; | ||
} | ||
this.currLoadedComponent = storyContent.appendTo(WrapperElm).getComponent(); | ||
} | ||
} | ||
|
||
<div id="Wrapper"></div> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import addons from '@storybook/addons'; | ||
import WrapStory from './WrapStory.marko'; | ||
|
||
import { | ||
knob, | ||
text, | ||
boolean, | ||
number, | ||
color, | ||
object, | ||
array, | ||
date, | ||
select, | ||
selectV2, | ||
button, | ||
manager, | ||
} from '../base'; | ||
|
||
export { knob, text, boolean, number, color, object, array, date, select, selectV2, button }; | ||
|
||
export const markoHandler = (channel, knobStore) => getStory => context => { | ||
const initialContent = getStory(context); | ||
const props = { context, storyFn: getStory, channel, knobStore, initialContent }; | ||
|
||
return WrapStory.renderSync({props: props}); | ||
}; | ||
|
||
function wrapperKnobs(options) { | ||
const channel = addons.getChannel(); | ||
manager.setChannel(channel); | ||
|
||
if (options) channel.emit('addon:knobs:setOptions', options); | ||
|
||
return markoHandler(channel, manager.knobStore); | ||
} | ||
|
||
export function withKnobs(storyFn, context) { | ||
return wrapperKnobs()(storyFn)(context); | ||
} | ||
|
||
export function withKnobsOptions(options = {}) { | ||
return (storyFn, context) => wrapperKnobs(options)(storyFn)(context); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
docs | ||
.babelrc |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
# Storybook for Marko | ||
|
||
[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook) | ||
[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) | ||
[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847) | ||
[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook) | ||
[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/) | ||
[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors) | ||
|
||
* * * | ||
|
||
Storybook for Marko is a UI development environment for your Marko components. | ||
With it, you can visualize different states of your UI components and develop them interactively. | ||
|
||
![Storybook Screenshot](docs/demo.gif) | ||
|
||
Storybook runs outside of your app. | ||
So you can develop UI components in isolation without worrying about app specific dependencies and requirements. | ||
|
||
## Getting Started | ||
|
||
```sh | ||
npm i -g @storybook/cli | ||
cd my-marko-app | ||
getstorybook | ||
``` | ||
|
||
For more information visit: [storybook.js.org](https://storybook.js.org) | ||
|
||
* * * | ||
|
||
Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish. | ||
You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want. | ||
|
||
Here are some featured storybooks that you can reference to see how Storybook works: | ||
|
||
## Typescript | ||
|
||
## Docs | ||
|
||
- [Basics](https://storybook.js.org/basics/introduction) | ||
- [Configurations](https://storybook.js.org/configurations/default-config) | ||
- [Addons](https://storybook.js.org/addons/introduction) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
#!/usr/bin/env node | ||
|
||
require('../dist/server/build'); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
#!/usr/bin/env node | ||
|
||
require('../dist/server'); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
/* eslint-disable global-require */ | ||
module.exports = {}; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this file needed? |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
{ | ||
"name": "@storybook/marko", | ||
"version": "4.0.0-alpha.1", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. change the version to the latest There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Some reason when i do that i get below error when i do a yarn bootstrap
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You probably need to change it in example dependency as well |
||
"description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.", | ||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/marko", | ||
"bugs": { | ||
"url": "https://github.com/storybooks/storybook/issues" | ||
}, | ||
"license": "MIT", | ||
"main": "dist/client/index.js", | ||
"jsnext:main": "src/client/index.js", | ||
"bin": { | ||
"build-storybook": "./bin/build.js", | ||
"start-storybook": "./bin/index.js", | ||
"storybook-server": "./bin/index.js" | ||
}, | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/storybooks/storybook.git" | ||
}, | ||
"scripts": { | ||
"dev": "cross-env DEV_BUILD=1 nodemon --watch ./src --exec \"yarn prepare\"", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this is already unneeded. |
||
"prepare": "node ../../scripts/prepare.js" | ||
}, | ||
"dependencies": { | ||
"@storybook/addons": "4.0.0-alpha.4", | ||
"@storybook/channel-postmessage": "4.0.0-alpha.4", | ||
"@storybook/client-logger": "4.0.0-alpha.4", | ||
"@storybook/core": "4.0.0-alpha.4", | ||
"@storybook/node-logger": "4.0.0-alpha.4", | ||
"@storybook/ui": "4.0.0-alpha.4", | ||
"airbnb-js-shims": "^1.4.1", | ||
"babel-loader": "^7.1.4", | ||
"babel-plugin-macros": "^2.2.0", | ||
"babel-plugin-transform-regenerator": "^6.26.0", | ||
"babel-plugin-transform-runtime": "^6.23.0", | ||
"babel-preset-env": "^1.6.1", | ||
"babel-preset-minify": "^0.3.0", | ||
"babel-preset-stage-0": "^6.24.1", | ||
"babel-runtime": "^6.26.0", | ||
"case-sensitive-paths-webpack-plugin": "^2.1.2", | ||
"common-tags": "^1.7.2", | ||
"core-js": "^2.5.4", | ||
"dotenv-webpack": "^1.5.5", | ||
"glamor": "^2.20.40", | ||
"glamorous": "^4.12.1", | ||
"global": "^4.3.2", | ||
"html-loader": "^0.5.5", | ||
"html-webpack-plugin": "^3.2.0", | ||
"lodash.flattendeep": "^4.4.0", | ||
"markdown-loader": "^2.0.2", | ||
"prop-types": "^15.6.1", | ||
"webpack": "^4.5.0", | ||
"webpack-hot-middleware": "^2.21.2" | ||
}, | ||
"devDependencies": { | ||
"nodemon": "^1.17.3" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this is also unneeded |
||
}, | ||
"peerDependencies": { | ||
"babel-core": "^6.26.0 || ^7.0.0-0", | ||
"babel-runtime": ">=6.0.0" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
export { | ||
storiesOf, | ||
setAddon, | ||
addDecorator, | ||
addParameters, | ||
configure, | ||
getStorybook, | ||
forceReRender, | ||
} from './preview'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
<div> | ||
<div class="errordisplay_heading">${input.message}</div> | ||
<pre class="errordisplay_stack">${input.stack}</pre> | ||
</div> | ||
|
||
<style> | ||
body { | ||
color: #FFF; | ||
background-color: rgb(187, 49, 49); | ||
font-family: -apple-system,BlinkMacSystemFont,'SF UI Text','Helvetica Neue',Roboto,'Arial Nova','Segoe UI',Arial,sans-serif; | ||
min-height: 100%; | ||
line-height: 1.6; | ||
webkit-font-smoothing: antialiased; | ||
} | ||
|
||
.errordisplay_heading { | ||
font-size: 20; | ||
font-weight: 600; | ||
letter-spacing: 0.2; | ||
margin: 10px 0; | ||
font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif; | ||
} | ||
|
||
.errordisplay_stack { | ||
font-size: 14; | ||
width: 100vw; | ||
overflow: auto; | ||
} | ||
</style> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not needed as well, see #3457 |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<p>No Preview Available!</p> | ||
|
||
<style> | ||
body { | ||
color: #37393b; | ||
font-family: -apple-system,BlinkMacSystemFont,'SF UI Text','Helvetica Neue',Roboto,'Arial Nova','Segoe UI',Arial,sans-serif; | ||
line-height: 1.6; | ||
} | ||
</style> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { start } from '@storybook/core/client'; | ||
|
||
import render from './render'; | ||
|
||
const { clientApi, configApi, forceReRender } = start(render); | ||
|
||
export const { | ||
storiesOf, | ||
setAddon, | ||
addDecorator, | ||
addParameters, | ||
clearDecorators, | ||
getStorybook, | ||
} = clientApi; | ||
|
||
export const { configure } = configApi; | ||
export { forceReRender }; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Did you want to add here something?