-
-
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
Merged
Merged
Changes from 29 commits
Commits
Show all changes
36 commits
Select commit
Hold shift + click to select a range
51d725a
marko branch that works...
6e6bc01
a marko template actually loadsgit add -A
8c5549e
add components in marko-cli
3807654
make knobs+actions work
bb20d63
Resolved merge conflict
d44022f
fix app/marko to point to 4.0.0-alpha.4, remove stuff thats not neede…
7a09fd3
remove unused references in files
26d71a0
fix lint errors for marko app
d09c83f
add postcss-loader options in js, some refactoring of stories
d99b440
review comments, use new showError framework
7a34592
Merge branch 'master' of github.com:storybooks/storybook into addmark…
621c62f
fix error message for marko component error
35b5e9b
Merge branch 'master' into addmarkosupport
nm123github 727e14d
add info in ADDONS_SUPPORT.md
c85a9d7
Merge branch 'addmarkosupport' of github.com:nm123github/storybook in…
b0dd82c
update yarn
4e7018d
update app/marko version.
de43701
Fix the import of external md files for marko
04bdf98
Merge branch 'master' of github.com:storybooks/storybook into addmark…
2f4a45d
update logo and gif for marko app
732c6d4
Fix render order in preview for marko
d2859d2
Configure netlify
Hypnosphi 067caf8
Configure hierarchy separator
Hypnosphi f00a369
Add CLI template
Hypnosphi 46de88c
CLI: remove unused stuff
Hypnosphi 1acf55f
register options addon
Hypnosphi d92851f
Add slow start guide
Hypnosphi cb6f795
Add live examples
Hypnosphi 24bdcfc
remove No Preview story
ddb7bed
some refactoring and review comments..
e9df6b6
add storysource addon
d8e0673
Merge branch 'master' of github.com:storybooks/storybook into addmark…
554f4f1
Merge branch 'master' of github.com:storybooks/storybook into addmark…
d752981
Merge remote-tracking branch 'origin/master' into addmarkosupport
Hypnosphi 55750a1
Merge branch 'addmarkosupport' of github.com:nm123github/storybook in…
d25429a
Re-generate lockfile
Hypnosphi File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,19 @@ | ||
## Addon / Framework Support Table | ||
|
||
| |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| | ||
| |[React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [Marko](app/marko)| | ||
| ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:| | ||
|[a11y](addons/a11y) |+| | | | | | | ||
|[actions](addons/actions) |+|+|+|+|+|+| | ||
|[background](addons/background) |+| | | | |+| | ||
|[centered](addons/centered) |+| |+| | |+| | ||
|[events](addons/events) |+| | | | | | | ||
|[graphql](addons/graphql) |+| | | | | | | ||
|[info](addons/info) |+| | | | | | | ||
|[jest](addons/jest) |+| | | | | | | ||
|[knobs](addons/knobs) |+|+|+|+|+|+| | ||
|[links](addons/links) |+|+|+|+|+|+| | ||
|[notes](addons/notes) |+| |+|+|+|+| | ||
|[options](addons/options) |+|+|+|+|+|+| | ||
|[storyshots](addons/storyshots) |+|+|+|+| | | | ||
|[storysource](addons/storysource)|+| |+|+|+|+| | ||
|[viewport](addons/viewport) |+| |+|+|+|+| | ||
|[a11y](addons/a11y) |+| | | | | | | | ||
|[actions](addons/actions) |+|+|+|+|+|+|+| | ||
|[background](addons/background) |+| | | | |+| | | ||
|[centered](addons/centered) |+| |+| | |+| | | ||
|[events](addons/events) |+| | | | | | | | ||
|[graphql](addons/graphql) |+| | | | | | | | ||
|[info](addons/info) |+| | | | | | | | ||
|[jest](addons/jest) |+| | | | | | | | ||
|[knobs](addons/knobs) |+|+|+|+|+|+|+| | ||
|[links](addons/links) |+|+|+|+|+|+| | | ||
|[notes](addons/notes) |+| |+|+|+|+| | | ||
|[options](addons/options) |+|+|+|+|+|+|+| | ||
|[storyshots](addons/storyshots) |+|+|+|+| | | | | ||
|[storysource](addons/storysource)|+| |+|+|+|+| | | ||
|[viewport](addons/viewport) |+| |+|+|+|+| | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
module.exports = require('./dist/marko'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }); | ||
}; | ||
|
||
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); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
docs | ||
.babelrc |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
# 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: | ||
|
||
## Docs | ||
|
||
- [Basics](https://storybook.js.org/basics/introduction) | ||
- [Configurations](https://storybook.js.org/configurations/default-config) | ||
- [Addons](https://storybook.js.org/addons/introduction) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
#!/usr/bin/env node | ||
|
||
require('../dist/server/build'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
#!/usr/bin/env node | ||
|
||
require('../dist/server'); |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
{ | ||
"name": "@storybook/marko", | ||
"version": "4.0.0-alpha.4", | ||
"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": { | ||
"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-webpack-plugin": "^3.2.0", | ||
"raw-loader": "^0.5.1", | ||
"lodash.flattendeep": "^4.4.0", | ||
"prop-types": "^15.6.1", | ||
"webpack": "^4.5.0", | ||
"webpack-hot-middleware": "^2.21.2" | ||
}, | ||
"peerDependencies": { | ||
"babel-core": "^6.26.0 || ^7.0.0-0", | ||
"babel-runtime": ">=6.0.0" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
export { | ||
storiesOf, | ||
setAddon, | ||
addDecorator, | ||
addParameters, | ||
configure, | ||
getStorybook, | ||
forceReRender, | ||
} from './preview'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import { document } from 'global'; | ||
import { stripIndents } from 'common-tags'; | ||
|
||
const rootEl = document.getElementById('root'); | ||
let currLoadedComponent = null; // currently loaded marko widget! | ||
|
||
export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) { | ||
const element = story(); | ||
|
||
// We need to unmount the existing set of components in the DOM node. | ||
if (currLoadedComponent) { | ||
currLoadedComponent.destroy(); | ||
} | ||
|
||
if (!element || !element.out) { | ||
showError({ | ||
title: `Expecting a Marko element from the story: "${selectedStory}" of "${selectedKind}".`, | ||
description: stripIndents` | ||
Did you forget to return the Marko element from the story? | ||
Use "() => MyComp.renderSync({})" or "() => { return MyComp.renderSync({}); }" when defining the story. | ||
`, | ||
}); | ||
return; | ||
} | ||
|
||
showMain(); | ||
currLoadedComponent = element.appendTo(rootEl).getComponent(); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
class { | ||
onCreate(input) { | ||
} | ||
|
||
handleStartClick() { | ||
alert('hi') | ||
} | ||
} | ||
|
||
<div> | ||
<button type="button" on-click("handleStartClick")>Hello!</button> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<style> | ||
#app { | ||
font-family: 'Avenir', Helvetica, Arial, sans-serif; | ||
-webkit-font-smoothing: antialiased; | ||
-moz-osx-font-smoothing: grayscale; | ||
text-align: center; | ||
color: #2c3e50; | ||
margin-top: 60px; | ||
} | ||
|
||
h1, h2 { | ||
font-weight: normal; | ||
} | ||
|
||
ul { | ||
list-style-type: none; | ||
padding: 0; | ||
} | ||
|
||
li { | ||
display: inline-block; | ||
margin: 0 10px; | ||
} | ||
|
||
a { | ||
color: #42b983; | ||
} | ||
</style> | ||
|
||
<div id="app"> | ||
<h1>Welcome to Storybook for Marko</h1> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { buildStatic } from '@storybook/core/server'; | ||
import path from 'path'; | ||
import packageJson from '../../package.json'; | ||
import getBaseConfig from './config/webpack.config.prod'; | ||
import loadConfig from './config'; | ||
|
||
buildStatic({ | ||
packageJson, | ||
getBaseConfig, | ||
loadConfig, | ||
defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'), | ||
}); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
Why is this empty method needed?