-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
51 changed files
with
1,436 additions
and
2 deletions.
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
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,24 @@ | ||
{ | ||
"ignore": [], | ||
"env": { | ||
"test": { | ||
"presets": [ | ||
[ | ||
"@babel/env", | ||
{ | ||
"modules": false, "loose": true | ||
} | ||
] | ||
], | ||
"plugins": [ | ||
"@babel/plugin-transform-runtime", | ||
[ | ||
"@babel/plugin-transform-modules-commonjs", | ||
{ | ||
"allowTopLevelThis": false | ||
} | ||
] | ||
] | ||
} | ||
} | ||
} |
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 @@ | ||
docs | ||
src | ||
.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,26 @@ | ||
# Storybook for Riot <sup>alpha</sup> | ||
|
||
* * * | ||
|
||
Storybook for Riot is a UI development environment for the components written with riot.js. | ||
With it, you can visualize different states of your UI components and develop them interactively. | ||
|
||
![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/storybook-intro.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-app | ||
getstorybook --html | ||
``` | ||
|
||
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. |
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,4 @@ | ||
#!/usr/bin/env node | ||
|
||
process.env.NODE_ENV = process.env.NODE_ENV || 'production'; | ||
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'); |
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,65 @@ | ||
{ | ||
"name": "@storybook/riot", | ||
"version": "4.0.0-alpha.16", | ||
"description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.", | ||
"homepage": "https://github.com/storybooks/storybook/tree/master/app/riot", | ||
"bugs": { | ||
"url": "https://github.com/storybooks/storybook/issues" | ||
}, | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/storybooks/storybook.git" | ||
}, | ||
"license": "MIT", | ||
"main": "dist/client/index.js", | ||
"bin": { | ||
"build-storybook": "./bin/build.js", | ||
"start-storybook": "./bin/index.js", | ||
"storybook-server": "./bin/index.js" | ||
}, | ||
"scripts": { | ||
"test": "cross-env NODE_ENV=test jest", | ||
"prepare": "node ../../scripts/prepare.js" | ||
}, | ||
"dependencies": { | ||
"@babel/runtime": "^7.0.0-rc.2", | ||
"@storybook/core": "4.0.0-alpha.16", | ||
"common-tags": "^1.8.0", | ||
"global": "^4.3.2", | ||
"moment": "^2.22.2", | ||
"riot": "^3.11.1", | ||
"riot-hot-reload": "^1.0.0", | ||
"riot-tag-loader": "^2.1.0", | ||
"raw-loader": "^0.5.1", | ||
"riot-compiler": "^3.5.1", | ||
"react": "^16.4.2", | ||
"react-dom": "^16.4.2" | ||
}, | ||
"devDependencies": { | ||
"cross-env": "^5.2.0", | ||
"babel-core": "^7.0.0-bridge.0", | ||
"@babel/core": "^7.0.0-rc.2", | ||
"@babel/preset-env": "^7.0.0-rc.2", | ||
"@babel/plugin-transform-runtime": "^7.0.0-rc.2", | ||
"@babel/plugin-transform-modules-commonjs": "^7.0.0-rc.2", | ||
"babel-jest": "^23.4.2", | ||
"jest": "^23.5.0" | ||
}, | ||
"jest": { | ||
"transform": { | ||
"^.+\\.jsx?$": "babel-jest" | ||
}, | ||
"rootDir": ".", | ||
"verbose": true, | ||
"moduleFileExtensions": [ | ||
"js", | ||
"jsx" | ||
], | ||
"moduleDirectories": [ | ||
"node_modules" | ||
] | ||
}, | ||
"peerDependencies": { | ||
"babel-core": "6.x || ^7.0.0-0 || ^8.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,3 @@ | ||
import { window } from 'global'; | ||
|
||
window.STORYBOOK_ENV = 'riot'; |
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,18 @@ | ||
import { start } from '@storybook/core/client'; | ||
|
||
import './globals'; | ||
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,70 @@ | ||
import { document } from 'global'; | ||
import { stripIndents } from 'common-tags'; | ||
import { unregister, mount } from 'riot'; | ||
import compiler from 'riot-compiler'; | ||
|
||
const rootElement = document.getElementById('root'); | ||
|
||
function guessRootName(stringified) { | ||
return stringified.trim().match(/^<[^ >]+\/>$/) ? stringified.trim().replace(/[<>/]/g, '') : | ||
stringified.substring(stringified.indexOf('<') + 1, | ||
Math.min(stringified.indexOf(' ', stringified.indexOf('<') + 1), stringified.indexOf('>'))); | ||
} | ||
|
||
function renderStringified({ tags, scenario = `<${(tags[0]||[]).boundAs || guessRootName(tags[0]||'')}/>` }) { | ||
unregister('root') | ||
unregister('div') | ||
unregister('p') | ||
unregister('span') | ||
const toMount = tags.map(({ boundAs }) => `_riot.mount('${boundAs}', opts)`).join(';'); | ||
tags.forEach(oneTag => oneTag.boundAs ? unregister(oneTag.boundAs) : unregister(guessRootName(oneTag))) | ||
tags.forEach(oneTag => { | ||
const { boundAs = guessRootName(oneTag), content } = oneTag || {} | ||
const sourceCode = (content||oneTag) | ||
.replace(`</${boundAs}>`, `<script>${toMount}</script></${boundAs}>`) | ||
.replace("var riot = require('riot')", '') | ||
.trim(); | ||
eval(`_${compiler.compile(sourceCode, {})}`); // eslint-disable-line no-eval | ||
}); | ||
const rootName =guessRootName(scenario) | ||
const sourceCode = `<root>${scenario.replace( | ||
`</${rootName}>`, | ||
`<script>${toMount}</script></${rootName}>` | ||
)}</root>`; | ||
eval(`_${compiler.compile(sourceCode, {})}`); // eslint-disable-line no-eval | ||
mount('*'); | ||
} | ||
|
||
function renderRaw(sourceCode) { | ||
unregister('root') | ||
eval(`_${compiler.compile( | ||
sourceCode.replace("var riot = require('riot')", '').trim(), {})}`);// eslint-disable-line no-eval | ||
mount('root', /riot\.tag2\s*\(\s*'([^']+)'/.exec(sourceCode)[1], {}); | ||
} | ||
|
||
function renderCompiledObject(component) { | ||
rootElement.appendChild( | ||
(!component.length ? story() : component)[0].__.root); // eslint-disable-line no-underscore-dangle | ||
} | ||
|
||
export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) { | ||
showMain(); | ||
rootElement.innerHTML = '<root></root>'; | ||
const component = story(); | ||
const { tags } = component || {}; | ||
if (typeof component === 'string'){ | ||
renderRaw(component); | ||
} else if (Array.isArray(tags)) { | ||
renderStringified(component); | ||
} else if (typeof component === 'object') { | ||
renderCompiledObject(component) | ||
} else { | ||
showError({ | ||
title: `Expecting a riot snippet or a riot component from the story: "${selectedStory}" of "${selectedKind}".`, | ||
description: stripIndents` | ||
Did you forget to return the component snippet from the story? | ||
Use "() => <your snippet or node>" or when defining the story. | ||
`, | ||
}); | ||
} | ||
} |
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,15 @@ | ||
import renderMain from './render' | ||
|
||
describe('render a riot element', () => { | ||
|
||
it('should not work with nothing', () => { | ||
renderMain({story: () => null, selectedKind: 'test with null', selectedStory: 'empty story', | ||
showMain: () => {}, showError: () => {}}) | ||
}) | ||
|
||
it('can work with some text', () => { | ||
renderMain({story: () => '<div><p>some test</p></div>', selectedKind: 'test with null', selectedStory: 'empty story', | ||
showMain: () => {}, showError: () => {}}) | ||
}) | ||
|
||
}) |
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,4 @@ | ||
import { buildStatic } from '@storybook/core/server'; | ||
import options from './options'; | ||
|
||
buildStatic(options); |
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,5 @@ | ||
import { buildDev } from '@storybook/core/server'; | ||
|
||
import options from './options'; | ||
|
||
buildDev(options); |
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,8 @@ | ||
import packageJson from '../../package.json'; | ||
|
||
import wrapInitialConfig from './wrapInitialConfig'; | ||
|
||
export default { | ||
packageJson, | ||
wrapInitialConfig, | ||
}; |
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 @@ | ||
export default config => ({ | ||
...config, | ||
module: { | ||
...config.module, | ||
rules: [ | ||
...config.module.rules, | ||
{ | ||
test: /\.tag$/, | ||
use: [ | ||
{ | ||
loader: require.resolve('riot-tag-loader'), | ||
}, | ||
], | ||
}, | ||
], | ||
}, | ||
}); |
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,15 @@ | ||
# See http://help.github.com/ignore-files/ for more about ignoring files. | ||
|
||
# dependencies | ||
node_modules | ||
|
||
# testing | ||
coverage | ||
|
||
# production | ||
build | ||
|
||
# misc | ||
.DS_Store | ||
.env | ||
npm-debug.log |
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,8 @@ | ||
import '@storybook/addon-storysource/register'; | ||
import '@storybook/addon-actions/register'; | ||
import '@storybook/addon-links/register'; | ||
import '@storybook/addon-notes/register'; | ||
import '@storybook/addon-knobs/register'; | ||
import '@storybook/addon-viewport/register'; | ||
import '@storybook/addon-options/register'; | ||
import '@storybook/addon-backgrounds/register'; |
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,15 @@ | ||
import { configure } from '@storybook/riot'; | ||
import { setOptions } from '@storybook/addon-options'; | ||
|
||
setOptions({ | ||
hierarchyRootSeparator: /\|/, | ||
}); | ||
|
||
function loadStories() { | ||
require('../src/stories'); | ||
|
||
const req = require.context('../src/stories', true, /\.stories\.js$/); | ||
req.keys().forEach(filename => req(filename)); | ||
} | ||
|
||
configure(loadStories, module); |
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 @@ | ||
const path = require('path'); | ||
|
||
module.exports = (storybookBaseConfig, configType, defaultConfig) => { | ||
defaultConfig.module.rules.push({ | ||
test: [/\.stories\.js$/, /index\.js$/], | ||
loaders: [require.resolve('@storybook/addon-storysource/loader')], | ||
include: [path.resolve(__dirname, '../src')], | ||
enforce: 'pre', | ||
}); | ||
|
||
return defaultConfig; | ||
}; |
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 @@ | ||
# Storybook Demo | ||
|
||
This is a demo app to test riot.js integration with Storybook. Run `npm install` to sync Storybook module with the source code and run `npm run storybook` to start the Storybook. |
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,11 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>demo2</title> | ||
</head> | ||
<body> | ||
<div id="app"></div> | ||
<script src="/dist/build.js"></script> | ||
</body> | ||
</html> |
Oops, something went wrong.