GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-21 05:02:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1486 from storybooks/hoisting-and-circleci

Browse Source 
SWITCH to circleci over travisCI && CHANGE lerna bootstrap procedure:
This commit is contained in:
Michael Shilman 2017-07-19 14:53:02 -07:00 committed by GitHub
commit 251c56333c
27 changed files with 973 additions and 282 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
.circleci/config.yml Normal file
View File

@ -0,0 +1,185 @@
defaults: &defaults
working_directory: /tmp/storybook
docker:
- image: node:8
version: 2
dependencies:
pre:
- npm install -g npm
jobs:
validate:
<<: *defaults
steps:
- run:
name: "Checking Versions"
command: |
node --version
npm --version
yarn --version
build:
<<: *defaults
steps:
- checkout
- restore_cache:
keys:
- root-dependencies-{{ checksum "package.json" }}
- root-dependencies-
- run:
name: "Install root dependencies"
command: |
yarn install
- save_cache:
key: root-dependencies-{{ checksum "package.json" }}
paths:
- node_modules
- restore_cache:
keys:
- package-dependencies-{{ checksum "package.json" }}
- package-dependencies-
- run:
name: "Bootstrapping"
command: |
npm run bootstrap
- save_cache:
key: package-dependencies-{{ checksum "package.json" }}
paths:
- app/**/node_modules
- docs/**/node_modules
- examples/**/node_modules
- lib/**/node_modules
example-kitchen-sink:
<<: *defaults
steps:
- run:
name: "Running kitchen-sink"
command: |
echo "TODO"
example-test-cra:
<<: *defaults
steps:
- checkout
- restore_cache:
keys:
- root-dependencies-{{ checksum "package.json" }}
- root-dependencies-
- run:
name: "Install root dependencies"
command: |
yarn install
- run:
name: "Bootstrapping"
command: |
npm run bootstrap
npm run bootstrap:test-cra
- run:
name: "Running test-cra"
command: |
echo "TODO"
example-react-native:
<<: *defaults
steps:
- checkout
- restore_cache:
keys:
- root-dependencies-{{ checksum "package.json" }}
- root-dependencies-
- run:
name: "Install root dependencies"
command: |
yarn install
- run:
name: "Bootstrapping packages"
command: |
npm run bootstrap
npm run bootstrap:react-native-vanilla
- run:
name: "Running react-native"
command: |
echo "TODO"
docs:
<<: *defaults
steps:
- checkout
- restore_cache:
keys:
- root-dependencies-{{ checksum "package.json" }}
- root-dependencies-
- run:
name: "Install root dependencies"
command: |
yarn install
- run:
name: "Bootstrapping"
command: |
npm run bootstrap:docs
- run:
name: "Running docs"
command: |
npm run docs:build
lint:
<<: *defaults
steps:
- checkout
- restore_cache:
keys:
- root-dependencies-{{ checksum "package.json" }}
- root-dependencies-
- run:
name: "Install root dependencies"
command: |
yarn install
- run:
name: "Linting"
command: |
npm run lint
unit-test:
<<: *defaults
steps:
- checkout
- restore_cache:
keys:
- root-dependencies-{{ checksum "package.json" }}
- root-dependencies-
- run:
name: "Install root dependencies"
command: |
yarn install
- run:
name: "Bootstrapping"
command: |
npm run bootstrap
npm run bootstrap:docs
npm run bootstrap:test-cra
npm run bootstrap:react-native-vanilla
- run:
name: "Unit testing"
command: |
npm run test -- --coverage -i
npm run coverage
deploy:
<<: *defaults
steps:
- run:
name: "Deploy"
command: |
echo "TODO"
workflows:
version: 2
build_accept_deploy:
jobs:
- validate
- build
- example-kitchen-sink
- example-test-cra
- example-react-native
- docs
- lint
- unit-test
- deploy:
type: approval
requires:
- lint
- unit-test
- docs

33
.travis.yml
View File

@ -1,33 +0,0 @@
language: node_js
cache:
directories:
- node_modules
- ".cache"
notifications:
email: false
node_js:
- node
before_install: "./scripts/travis/before_install.sh"
after_success: "./scripts/travis/after_success.sh"
script:
- npm run bootstrap
- npm run bootstrap:test-cra
- npm run bootstrap:react-native-vanilla
- npm run bootstrap:docs
- npm run lint
- npm run test -- --coverage
- npm run coverage
- ([ -z "$DANGER_GITHUB_API_TOKEN" ] && echo "DANGER_GITHUB_API_TOKEN not set") || npm run danger
git:
depth: 1
env:
global:
- CXX=g++-4.8
- secure: cAde4wBX75KtTWcyOOLAG3Z9ODdqvmbkL7+8fVNj/+QkZZWE8pFa3deaTIHF9NyVO2h6/jutSkzmsz/nOyBYVPHhGsxBTmsyXoko48Wg+iNm7epoH5uts/kmAPiwpzaWGXwuiAvsOGZjYYFzM335jyaOAcZW3f0C5gIJ5XCCdWBQRaFFLq+ZLKsLSME6xTfV2OMVH24hxXvbF9wvO0aj6p/GaT0cS8Rpg4sQ9eeih2IM/uLiqWzp9UUM2m8SUiFfveqYJFkBtzqAus9pbwsoQjnAT5e3CKJUpPiruCAe5FOt57Hl+mH1N1xqP1ei8j2ZNF+E6zuDdAcMpArTIMM69L+D7wzJYDoF2PuF+jeet7ytAFxSgnZHSTsBJn5cZMPh2tuX7aWwgrpMknVe3bdoINwkyVCaIW+Ur6vc37l/Kuw25eiMBtRDyMhUf4V3FAFi3PV1XKn+34cR4kvpOHt6vk8v5CobBHfQdwU+6FMZMo3GFIkDBcLydLn3WLQ3jKa4OcLqWws6o85k+bHZkLhlADjbiX/PzG23D+sT7Inzj//Tef93SIL02yN+ooZdIUtDus3+qZzhcSrDeSb2octjLXRzPiGn5cFNI86HVcu7qF0+4zCPconhM4+mfAh5S19fmnRdTQctQQxbsObuT9jcMvgJdhIX89aA7Ry3pAx2b6Q=
- secure: 1iZAjDqikmJaXvql/bpNZay9u5yyQCwNyz3OmcvhJDds6lIKUUU24S3srsYatmE2lkpUuRertieGtzMPkhNx/rFRePD7SZAnSMADyA+lxW9SWu8LHEBcjgsDY89iJH6+4BiYIrldP0vjORYJDwtiEKB3bSJX88zkLpTVTS/L5EHS9kQ/xtQsvoNB69C1ExCt7EVgSL9cDVccFvrU1FhC8w4eH5j3fNikQduaPhF+iqoTo8GW/m22/95Xhmngcu7n6Fm8G/YA2xmkvdCBLL7rLSwccwG9j9MRei704NrBOux7xN/2euVg5jYbFCaDQNjuu4UrvVB2YFxqvpsjYByktfqNMTheqcGdVuh3Jd7cMGmkMSBhUgmUW5KPH4v73mLUlHroywQUU3iiMiCvVMmTd5Xy0o0X0ks5mvXAXWHTmnQkvPyy/V6cwcUfgJC5k3M/V1hDCRMeMVPZsmh73lZffwpAkfx3xJsNf46f7h9aN9Q++danf9JryoS9YsdRBtjfJTtNaO2uH+iUMNSNzAbJmgxtsi3NuX+G+2N02mtaUCzN/SOmKKoZsuPfKVcpHgVa41mgio6QJs7wy9/VWYYASNZddj2HnvLGLBLnJpv+uKKpdSB0Xe6k8dOl1MbaWJT4Xy0/NUD3gawLCvhfN9qL0+QnlJAXCbOoms6EoAyc6fY=
addons:
apt:
sources:
- ubuntu-toolchain-r-test
packages:
- g++-4.8

2
addons/actions/package.json
View File

@ -24,7 +24,7 @@
"@storybook/addons": "^3.1.6",
"deep-equal": "^1.0.1",
"json-stringify-safe": "^5.0.1",
"prop-types": "^15.5.8",
"prop-types": "^15.5.10",
"react-inspector": "^2.1.1",
"uuid": "^3.1.0"
},

2
addons/comments/package.json
View File

@ -31,7 +31,7 @@
"insert-css": "^1.0.0",
"marked": "^0.3.6",
"moment": "^2.18.1",
"prop-types": "^15.5.8",
"prop-types": "^15.5.10",
"react-render-html": "^0.1.6",
"react-textarea-autosize": "^4.3.0"
},

10
addons/events/package.json
View File

@ -21,15 +21,15 @@
},
"dependencies": {
"@storybook/addons": "^3.1.6",
"babel-runtime": "^6.5.0",
"babel-runtime": "^6.23.0",
"format-json": "^1.0.3",
"prop-types": "^15.5.10",
"react-textarea-autosize": "^4.0.5",
"uuid": "^3.0.1"
"react-textarea-autosize": "^4.3.0",
"uuid": "^3.1.0"
},
"devDependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2"
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"peerDependencies": {
"react": "*"

2
addons/info/package.json
View File

@ -18,7 +18,7 @@
"babel-runtime": "^6.23.0",
"global": "^4.3.2",
"marksy": "^2.0.0",
"prop-types": "^15.5.8",
"prop-types": "^15.5.10",
"react-addons-create-fragment": "^15.5.3"
},
"devDependencies": {

2
addons/knobs/package.json
View File

@ -23,7 +23,7 @@
"insert-css": "^1.0.0",
"lodash.debounce": "^4.0.8",
"moment": "^2.18.1",
"prop-types": "^15.5.8",
"prop-types": "^15.5.10",
"react-color": "^2.11.4",
"react-datetime": "^2.8.10",
"react-textarea-autosize": "^4.3.0"

2
addons/storyshots/package.json
View File

@ -16,7 +16,7 @@
"dependencies": {
"babel-runtime": "^6.23.0",
"global": "^4.3.2",
"prop-types": "^15.5.8",
"prop-types": "^15.5.10",
"read-pkg-up": "^2.0.0"
},
"devDependencies": {

14
app/react-native/package.json
View File

@ -29,7 +29,7 @@
"@storybook/addons": "^3.1.6",
"@storybook/channel-websocket": "^3.1.6",
"@storybook/ui": "^3.1.9",
"autoprefixer": "^7.0.1",
"autoprefixer": "^7.1.1",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-syntax-async-functions": "^6.13.0",
@ -47,22 +47,22 @@
"babel-runtime": "^6.23.0",
"case-sensitive-paths-webpack-plugin": "^2.0.0",
"commander": "^2.9.0",
"css-loader": "^0.28.0",
"css-loader": "^0.28.1",
"events": "^1.1.1",
"express": "^4.15.2",
"express": "^4.15.3",
"file-loader": "^0.11.1",
"find-cache-dir": "^1.0.0",
"global": "^4.3.2",
"json-loader": "^0.5.4",
"json5": "^0.5.1",
"postcss-loader": "^2.0.3",
"postcss-loader": "^2.0.5",
"shelljs": "^0.7.7",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"util-deprecate": "^1.0.2",
"uuid": "^3.0.1",
"webpack": "^2.4.1",
"webpack-dev-middleware": "^1.10.1",
"uuid": "^3.1.0",
"webpack": "^2.5.1 || ^3.0.0",
"webpack-dev-middleware": "^1.10.2",
"webpack-hot-middleware": "^2.18.0",
"ws": "^3.0.0"
},

4
app/react/package.json
View File

@ -39,7 +39,7 @@
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.23.0",
"case-sensitive-paths-webpack-plugin": "^2.0.0",
"chalk": "^1.1.3",
"chalk": "^2.0.1",
"commander": "^2.9.0",
"common-tags": "^1.4.0",
"configstore": "^3.1.0",
@ -67,7 +67,7 @@
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",
"util-deprecate": "^1.0.2",
"uuid": "^3.0.1",
"uuid": "^3.1.0",
"webpack": "^2.5.1 || ^3.0.0",
"webpack-dev-middleware": "^1.10.2",
"webpack-hot-middleware": "^2.18.0"

2
examples/cra-kitchen-sink/package.json
View File

@ -16,7 +16,7 @@
"prop-types": "^15.5.10",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"uuid": "^3.0.1"
"uuid": "^3.1.0"
},
"devDependencies": {
"@storybook/addon-actions": "^3.0.0",

613
examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap Normal file
View File

@ -0,0 +1,613 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots App full app 1`] = `
<div
className="App"
>
<div
className="App-header"
>
<img
alt="logo"
className="App-logo"
src="file-stub"
/>
<h2>
Welcome to React
</h2>
</div>
<p
className="App-intro"
>
To get started, edit
<code>
src/App.js
</code>
and save to reload.
</p>
</div>
`;
exports[`Storyshots Button with knobs 1`] = `
<div
style={
Object {
"backgroundColor": "#ffff00",
"border": "3px solid #ff00ff",
"padding": "10px",
}
}
>
<p>
My name is Storyteller, I'm 70 years old, and my favorite fruit is apple.
</p>
<p>
My birthday is:
2017-1-20
</p>
<p>
My wallet contains: $
12.50
</p>
<p>
In my backpack, I have:
</p>
<ul>
<li>
Laptop
</li>
<li>
Book
</li>
<li>
Whiskey
</li>
</ul>
<p>
Nice to meet you!
</p>
</div>
`;
exports[`Storyshots Button with notes 1`] = `
<button
className="css-1yjiefr"
>
Check my notes in the notes panel
</button>
`;
exports[`Storyshots Button with some emoji 1`] = `
<button
className="css-1yjiefr"
onClick={[Function]}
>
😀 😎 👍 💯
</button>
`;
exports[`Storyshots Button with some info 1`] = `
<div>
<div
style={
Object {
"position": "relative",
"zIndex": 0,
}
}
>
<button
className="css-1yjiefr"
>
click the "?" in top right for info
</button>
</div>
<a
onClick={[Function]}
role="button"
style={
Object {
"background": "#28c",
"borderRadius": "0 0 0 5px",
"color": "#fff",
"cursor": "pointer",
"display": "block",
"fontFamily": "sans-serif",
"fontSize": "12px",
"padding": "5px 15px",
"position": "fixed",
"right": 0,
"textDecoration": "none",
"top": 0,
}
}
tabIndex="0"
>
Show Info
</a>
<div
style={
Object {
"background": "white",
"bottom": 0,
"display": "none",
"left": 0,
"overflow": "auto",
"padding": "0 40px",
"position": "fixed",
"right": 0,
"top": 0,
"zIndex": 99999,
}
}
>
<a
onClick={[Function]}
role="button"
style={
Object {
"background": "#28c",
"borderRadius": "0 0 0 5px",
"color": "#fff",
"cursor": "pointer",
"display": "block",
"fontFamily": "sans-serif",
"fontSize": "12px",
"padding": "5px 15px",
"position": "fixed",
"right": 0,
"textDecoration": "none",
"top": 0,
}
}
tabIndex="0"
>
×
</a>
<div
style={undefined}
>
<div
style={
Object {
"WebkitFontSmoothing": "antialiased",
"backgroundColor": "#fff",
"border": "1px solid #eee",
"borderRadius": "2px",
"boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
"color": "#444",
"fontFamily": "
-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
\\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
",
"fontSize": "15px",
"fontWeight": 300,
"lineHeight": 1.45,
"marginTop": "50px",
"padding": "20px 40px 40px",
}
}
>
<div
style={
Object {
"borderBottom": "1px solid #eee",
"marginBottom": 10,
"paddingTop": 10,
}
}
>
<h1
style={
Object {
"fontSize": "35px",
"margin": 0,
"padding": 0,
}
}
>
Button
</h1>
<h2
style={
Object {
"fontSize": "22px",
"fontWeight": 400,
"margin": "0 0 10px 0",
"padding": 0,
}
}
>
with some info
</h2>
</div>
<div
style={
Object {
"marginBottom": 0,
}
}
>
<p
style={
Object {
"WebkitFontSmoothing": "antialiased",
"color": "#444",
"fontFamily": "
-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
\\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
",
"fontSize": "15px",
}
}
>
Use the
<a
href="https://github.com/storybooks/storybook/tree/master/addons/info"
rel="noopener noreferrer"
style={
Object {
"color": "#3498db",
}
}
target="_blank"
>
info addon
</a>
with its painful API.
</p>
</div>
<div>
<h1
style={
Object {
"borderBottom": "1px solid #EEE",
"fontSize": "25px",
"margin": "20px 0 0 0",
"padding": "0 0 5px 0",
}
}
>
Story Source
</h1>
<pre
style={
Object {
"backgroundColor": "#fafafa",
"fontFamily": "Menlo, Monaco, \\"Courier New\\", monospace",
"fontSize": ".88em",
"lineHeight": 1.5,
"overflowX": "scroll",
"padding": ".5rem",
}
}
>
<div>
<div
style={
Object {
"paddingLeft": 18,
"paddingRight": 3,
}
}
>
<span
style={
Object {
"color": "#777",
}
}
>
&lt;
Button
</span>
<span />
<span
style={
Object {
"color": "#777",
}
}
>
&gt;
</span>
</div>
<div
style={
Object {
"paddingLeft": 33,
"paddingRight": 3,
}
}
>
<span
style={
Object {
"color": "#777",
}
}
>
click the "?" in top right for info
</span>
</div>
<div
style={
Object {
"paddingLeft": 18,
"paddingRight": 3,
}
}
>
<span
style={
Object {
"color": "#777",
}
}
>
&lt;/
Button
&gt;
</span>
</div>
</div>
</pre>
</div>
<div>
<h1
style={
Object {
"borderBottom": "1px solid #EEE",
"fontSize": "25px",
"margin": "20px 0 0 0",
"padding": "0 0 5px 0",
}
}
>
Prop Types
</h1>
<div>
<h2
style={
Object {
"margin": "20px 0 0 0",
}
}
>
"
Button
" Component
</h2>
<table
style={
Object {
"borderCollapse": "separate",
"borderSpacing": "10px 5px",
"marginLeft": -10,
}
}
>
<thead>
<tr>
<th>
property
</th>
<th>
propType
</th>
<th>
required
</th>
<th>
default
</th>
<th>
description
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
children
</td>
<td>
node
</td>
<td>
yes
</td>
<td>
-
</td>
<td />
</tr>
<tr>
<td>
onClick
</td>
<td>
func
</td>
<td>
no
</td>
<td>
-
</td>
<td />
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Storyshots Button with text 1`] = `
<button
className="css-1yjiefr"
onClick={[Function]}
>
Hello Button
</button>
`;
exports[`Storyshots Centered Button with text 1`] = `
<div
style={
Object {
"alignItems": "center",
"bottom": 0,
"display": "flex",
"justifyContent": "center",
"left": 0,
"overflow": "auto",
"position": "fixed",
"right": 0,
"top": 0,
}
}
>
<div
style={
Object {
"margin": "auto",
}
}
>
<button
className="css-1yjiefr"
onClick={[Function]}
>
Hello Button
</button>
</div>
</div>
`;
exports[`Storyshots Welcome to Storybook 1`] = `
<article
className="css-1fqbdip"
>
<h1
className="css-nil"
>
Welcome to storybook
</h1>
<p>
This is a UI component dev environment for your app.
</p>
<p>
We've added some basic stories inside the
<code
className="css-mteq83"
>
src/stories
</code>
directory.
<br />
A story is a single state of one or more UI components. You can have as many stories as you want.
<br />
(Basically a story is like a visual test case.)
</p>
<p>
See these sample
<a
className="css-ca0824"
onClick={[Function]}
role="button"
tabIndex="0"
>
stories
</a>
for a component called
<code
className="css-mteq83"
>
Button
</code>
.
</p>
<p>
Just like that, you can add your own components as stories.
<br />
You can also edit those components and see changes right away.
<br />
(Try editing the
<code
className="css-mteq83"
>
Button
</code>
stories located at
<code
className="css-mteq83"
>
src/stories/index.js
</code>
.)
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the
<a
className="css-ca0824"
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
target="_blank"
>
Writing Stories
</a>
section in our documentation.
</p>
<p
className="css-bwdon3"
>
<b>
NOTE:
</b>
<br />
Have a look at the
<code
className="css-mteq83"
>
.storybook/webpack.config.js
</code>
to add webpack loaders and plugins you are using in this project.
</p>
</article>
`;
exports[`Storyshots WithEvents Logger 1`] = `
<div
style={
Object {
"color": "rgb(51, 51, 51)",
"fontFamily": "
-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
\\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
",
"padding": 20,
}
}
>
<h1>
Logger
</h1>
<dl />
</div>
`;

45
examples/cra-kitchen-sink/src/storyshots.test.js
View File

@ -1,30 +1,17 @@
describe('Storyshots', () => {
xit('should run snapshot tests, but we\'ve disabled this temporarily', () => {});
});
import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots';
import path from 'path';
// NOTE: this file should contain a snapshot test, but it is temporarily disabled.
//
// From @tmeasday: "Both Lerna/npm5 and Jest are incompatible, so we cannot run
// Jest tests right now, unless we go to great lengths (see `test-cra`'s build process)."
//
// A succinct repro here: https://github.com/tmeasday/preserve-symlinks-test
//
// Once this difference is resolved, we should uncomment the following code:
//
// import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots';
// import path from 'path';
//
// function createNodeMock(element) {
// if (element.type === 'div') {
// return { scrollWidth: 123 };
// }
// return null;
// }
//
// initStoryshots({
// framework: 'react',
// configPath: path.join(__dirname, '..', '.storybook'),
// test: snapshotWithOptions({
// createNodeMock,
// }),
// });
function createNodeMock(element) {
if (element.type === 'div') {
return { scrollWidth: 123 };
}
return null;
}
initStoryshots({
framework: 'react',
configPath: path.join(__dirname, '..', '.storybook'),
test: snapshotWithOptions({
createNodeMock,
}),
});

15
examples/package.json
View File

@ -1,15 +0,0 @@
{
"name": "@storybook/examples",
"version": "1.0.0",
"description": "A set of examples of how to use storybook, also used for regression testing",
"main": "index.js",
"scripts": {
"test:automated-cra-getstorybook": "node scripts/automated-cra-getstorybook.js"
},
"license": "ISC",
"dependencies": {
"child-process-promise": "^2.2.1",
"getstorybook": "^1.7.0",
"rimraf": "^2.6.1"
}
}

2
examples/react-native-vanilla/package.json
View File

@ -14,7 +14,7 @@
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "1.9.2",
"jest": "20.0.4",
"jest": "^20.0.4",
"react-test-renderer": "16.0.0-alpha.6",
"@storybook/addon-actions": "file:../../addons/actions",
"@storybook/addon-links": "file:../../addons/links",

3
examples/react-native-vanilla/storybook/storybook.js vendored
View File

@ -19,4 +19,5 @@ setTimeout(
);
AppRegistry.registerComponent('ReactNativeVanilla', () => StorybookUI);
export default StorybookUI;
export { StorybookUI as default };

25
examples/scripts/automated-cra-getstorybook.js
View File

@ -1,25 +0,0 @@
#!/usr/bin/env node
/* eslint-disable */
/* This is an automated install of create-react-app & getstorybook */
const { exec } = require('child-process-promise');
const rimraf = require('rimraf');
const targetFolder = 'automated-cra-getstorybook';
const cleanDir = () => new Promise(resolve => rimraf(`./${targetFolder}`, resolve));
const craInstaller = () => exec('npm install create-react-app');
const craBoot = () => exec(`create-react-app ${targetFolder}`);
const storybookBoot = () => exec(`cd ${targetFolder} && getstorybook`);
const storybookBuild = () => exec(`cd ${targetFolder} && npm run build-storybook`);
Promise.all([craInstaller(), cleanDir()])
.then(craBoot)
.then(storybookBoot)
.then(storybookBuild)
.catch(error => {
console.log('rejected: ', error);
});

1
examples/test-cra/package.json
View File

@ -19,7 +19,6 @@
"devDependencies": {
"@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
"@storybook/addon-links": "file:../../packs/storybook-addon-links.tgz",
"@storybook/addon-storyshots": "file:../../packs/storybook-addon-storyshots.tgz",
"@storybook/addons": "file:../../packs/storybook-addons.tgz",
"@storybook/channel-postmessage": "file:../../packs/storybook-channel-postmessage.tgz",
"@storybook/channels": "file:../../packs/storybook-channels.tgz",

124
examples/test-cra/src/__snapshots__/storyshots.test.js.snap
View File

@ -1,124 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Button with some emoji 1`] = `
<button
className="css-1yjiefr"
onClick={[Function]}
>
😀 😎 👍 💯
</button>
`;
exports[`Storyshots Button with text 1`] = `
<button
className="css-1yjiefr"
onClick={[Function]}
>
Hello Button
</button>
`;
exports[`Storyshots ComponentWithRef basic 1`] = `<div />`;
exports[`Storyshots Welcome to Storybook 1`] = `
<article
className="css-1fqbdip"
>
<h1
className="css-nil"
>
Welcome to storybook
</h1>
<p>
This is a UI component dev environment for your app.
</p>
<p>
We've added some basic stories inside the
<code
className="css-mteq83"
>
src/stories
</code>
directory.
<br />
A story is a single state of one or more UI components. You can have as many stories as you want.
<br />
(Basically a story is like a visual test case.)
</p>
<p>
See these sample
<a
className="css-ca0824"
onClick={[Function]}
role="button"
tabIndex="0"
>
stories
</a>
for a component called
<code
className="css-mteq83"
>
Button
</code>
.
</p>
<p>
Just like that, you can add your own components as stories.
<br />
You can also edit those components and see changes right away.
<br />
(Try editing the
<code
className="css-mteq83"
>
Button
</code>
stories located at
<code
className="css-mteq83"
>
src/stories/index.js
</code>
.)
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the
<a
className="css-ca0824"
href="https://storybook.js.org/basics/writing-stories"
rel="noopener noreferrer"
target="_blank"
>
Writing Stories
</a>
section in our documentation.
</p>
<p
className="css-bwdon3"
>
<b>
NOTE:
</b>
<br />
Have a look at the
<code
className="css-mteq83"
>
.storybook/webpack.config.js
</code>
to add webpack loaders and plugins you are using in this project.
</p>
</article>
`;

17
examples/test-cra/src/storyshots.test.js
View File

@ -1,17 +0,0 @@
import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots';
import path from 'path';
function createNodeMock(element) {
if (element.type === 'div') {
return { scrollWidth: 123 };
}
return null;
}
initStoryshots({
framework: 'react',
configPath: path.join(__dirname, '..', '.storybook'),
test: snapshotWithOptions({
createNodeMock,
}),
});

1
jest.config.js
View File

@ -14,7 +14,6 @@ module.exports = {
'<rootDir>/examples/test-cra',
],
testPathIgnorePatterns: ['/node_modules/'],
projects: ['./', './examples/react-native-vanilla'],
collectCoverage: false,
collectCoverageFrom: [
'app/**/*.{js,jsx}',

2
lerna.json
View File

@ -1,5 +1,5 @@
{
"lerna": "2.0.0-rc.5",
"lerna": "2.0.0",
"commands": {
"bootstrap": {
"ignore": [

2
lib/addons/src/index.js
View File

@ -2,7 +2,7 @@ export class AddonStore {
constructor() {
this.loaders = {};
this.panels = {};
this.channel = null;
this.channel = { on() {}, emit() {} };
this.preview = null;
this.database = null;
}

2
lib/cli/package.json
View File

@ -25,7 +25,7 @@
},
"dependencies": {
"@storybook/codemod": "^3.1.6",
"chalk": "^1.1.3",
"chalk": "^2.0.1",
"child-process-promise": "^2.2.1",
"commander": "^2.9.0",
"cross-spawn": "^5.0.1",

6
lib/ui/package.json
View File

@ -26,11 +26,11 @@
"lodash.sortby": "^4.7.0",
"mantra-core": "^1.7.0",
"podda": "^1.2.2",
"prop-types": "^15.5.8",
"prop-types": "^15.5.10",
"qs": "^6.4.0",
"react-inspector": "^2.0.0",
"react-inspector": "^2.1.1",
"react-komposer": "^2.0.0",
"react-modal": "^1.7.6",
"react-modal": "^1.7.7",
"react-split-pane": "^0.1.63",
"redux": "^3.6.0"
},

27
package.json
View File

@ -1,14 +1,15 @@
{
"name": "storybook",
"version": "3.0.0",
"repository": {
"type": "git",
"url": "https://github.com/storybooks/storybook.git"
},
"scripts": {
"bootstrap": "lerna bootstrap",
"bootstrap:docs": "cd docs && npmc install",
"bootstrap:test-cra": "npm run build-packs && lerna exec --scope test-cra -- npmc install",
"bootstrap:react-native-vanilla": "lerna exec --scope react-native-vanilla -- npmc install",
"bootstrap": "lerna bootstrap --concurrency 1 --npm-client=\"yarn\" --hoist && node ./scripts/hoist-internals.js",
"bootstrap:docs": "cd docs && yarn install",
"bootstrap:react-native-vanilla": "lerna exec --scope react-native-vanilla -- yarn install",
"bootstrap:test-cra": "npm run build-packs && lerna exec --scope test-cra -- yarn install",
"build-packs": "lerna exec --scope '@storybook/*' --parallel -- ../../scripts/build-pack.sh ../../packs",
"changelog": "pr-log --sloppy",
"precommit": "lint-staged",
@ -27,13 +28,11 @@
"publish": "lerna publish",
"test": "jest --projects ./ ./examples/react-native-vanilla"
},
"engines": {
"node": "node"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-plugin-transform-md-import-to-string": "^1.0.6",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.5.1",
@ -52,15 +51,17 @@
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-prettier": "^2.1.1",
"eslint-plugin-react": "^7.0.1",
"fs-extra": "^4.0.0",
"gh-pages": "^1.0.0",
"github-release-from-changelog": "^1.2.1",
"glob": "^7.1.2",
"husky": "^0.14.3",
"jest": "^20.0.4",
"jest-enzyme": "^3.2.0",
"lerna": "2.0.0",
"lint-staged": "^4.0.0",
"nodemon": "^1.11.0",
"npmc": "^5.1.0-canary.2",
"npmlog": "^4.1.2",
"prettier": "^1.5.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
@ -71,7 +72,11 @@
"remark-lint-code-eslint": "^2.0.0",
"remark-preset-lint-recommended": "^2.0.0",
"remark-toc": "^4.0.0",
"shelljs": "^0.7.7"
"shelljs": "^0.7.7",
"symlink-dir": "^1.1.0"
},
"engines": {
"node": "node"
},
"collective": {
"type": "opencollective",
@ -82,6 +87,10 @@
"npm run lint:js -- --fix",
"git add"
],
"*.json": [
"npm run lint:js -- --fix",
"git add"
],
"*.md": [
"npm run lint:md -- -o",
"git add"

112
scripts/hoist-internals.js Normal file
View File

@ -0,0 +1,112 @@
const path = require('path');
const fs = require('fs-extra');
const fse = require('fs-extra');
const shell = require('shelljs');
const glob = require('glob');
const symlink = require('symlink-dir');
const log = require('npmlog');
const targetPath = path.join(__dirname, '..', 'node_modules', '@storybook');
const prefix = 'hoist-internals';
const cwd = path.join(__dirname, '..');
log.heading = 'lerna+';
log.addLevel('success', 3001, { fg: 'green', bold: true });
log.info(prefix, 'Hoisting internal packages');
const getLernaPackages = () =>
fse.readJson(path.join(__dirname, '..', 'lerna.json')).then(json => json.packages);
const passingLog = fn => i => {
fn(i);
return i;
};
const getPackageNameOfFolder = sourcePath =>
fse
.readJson(path.join(sourcePath, 'package.json'))
.then(json => json.name.replace('@storybook/', ''));
const task = getLernaPackages()
.then(
passingLog(packages => {
log.verbose(prefix, 'working dir paths: %j', cwd);
log.verbose(prefix, 'source paths: %j', packages);
log.verbose(prefix, 'target paths: %j', targetPath);
})
)
.then(packages => `@(${packages.map(s => s.replace('/*', '')).join('|')})/*/`)
.then(
passingLog(pattern => {
log.silly(prefix, 'pattern to look for packages: %j', pattern);
})
)
.then(
pattern =>
new Promise((resolve, reject) => {
glob(pattern, { cwd }, (error, results) => (error ? reject(error) : resolve(results)));
})
)
.then(results =>
Promise.all(
results
.map(sourcePath => path.resolve(fs.realpathSync(sourcePath)))
.reduce((acc, item) => {
if (!acc.includes(item)) {
acc.push(item);
}
return acc;
}, [])
.map(
passingLog(item => {
log.silly(prefix, 'found package path', item);
})
)
.map(sourcePath =>
getPackageNameOfFolder(sourcePath)
.then(
passingLog(packageName => {
log.silly(prefix, 'found package name', packageName);
})
)
.then(packageName => path.join(targetPath, packageName))
.then(localTargetPath =>
symlink(sourcePath, localTargetPath)
.then(
passingLog(() => {
log.silly(prefix, 'symlinked ', [sourcePath, localTargetPath]);
})
)
.then(() => localTargetPath)
.catch(error => {
log.error(prefix, 'symlink', error);
throw new Error('failed symlink');
})
)
)
)
)
.then(locations =>
Promise.all(
locations
.map(location => path.join(location, 'node_modules', '@storybook'))
.map(
passingLog(removePath => {
log.verbose(prefix, 'removing ', removePath);
})
)
.map(removePath => shell.rm('-rf', removePath))
.map(
(item, index) =>
item.code === 0 ? Promise.resolve(locations[index]) : Promise.reject(item)
)
)
);
task
.then(packages => {
log.info(prefix, packages.map(dir => dir.replace(cwd, '')).join(',\n'));
log.success(prefix, 'complete');
})
.catch(error => {
log.error(prefix, 'failed', error);
shell.exit(1);
});