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

Merge branch 'next' into dependabot/npm_and_yarn/svelte-2.15.2

Browse Source
This commit is contained in:
Norbert de Langen 2018-11-09 13:33:25 +01:00
commit cf3309c1f1
No known key found for this signature in database
GPG Key ID: 976651DA156C2825
33 changed files with 363 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
.circleci/config.yml
View File

@ -120,52 +120,52 @@ jobs:
name: Run react kitchen-sink (smoke test)
command: |
cd examples/cra-kitchen-sink
yarn storybook --smoke-test
yarn storybook --smoke-test --quiet
- run:
name: Run vue kitchen-sink (smoke test)
command: |
cd examples/vue-kitchen-sink
yarn storybook --smoke-test
yarn storybook --smoke-test --quiet
- run:
name: Run svelte kitchen-sink (smoke test)
command: |
cd examples/svelte-kitchen-sink
yarn storybook --smoke-test
yarn storybook --smoke-test --quiet
- run:
name: Run angular-cli (smoke test)
command: |
cd examples/angular-cli
yarn storybook --smoke-test
yarn storybook --smoke-test --quiet
- run:
name: Run ember-cli (smoke test)
command: |
cd examples/ember-cli
yarn storybook --smoke-test
yarn storybook --smoke-test --quiet
- run:
name: Run polymer-cli (smoke test)
command: |
cd examples/polymer-cli
yarn storybook --smoke-test
yarn storybook --smoke-test --quiet
- run:
name: Run marko-cli (smoke test)
command: |
cd examples/marko-cli
yarn storybook --smoke-test
yarn storybook --smoke-test --quiet
- run:
name: Run official-storybook (smoke test)
command: |
cd examples/official-storybook
yarn storybook --smoke-test
yarn storybook --smoke-test --quiet
- run:
name: Run mithril kitchen-sink (smoke test)
command: |
cd examples/mithril-kitchen-sink
yarn storybook --smoke-test
yarn storybook --smoke-test --quiet
- run:
name: Run riot kitchen-sink (smoke test)
command: |
cd examples/riot-kitchen-sink
yarn storybook --smoke-test
yarn storybook --smoke-test --quiet
native-smoke-tests:
<<: *defaults
steps:

4
.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_SmokeTests.kt vendored
View File

@ -30,7 +30,7 @@ object OpenSourceProjects_Storybook_SmokeTests : BuildType({
set -e -x
cd examples/$exampleDir
yarn storybook --smoke-test
yarn storybook --smoke-test --quiet
""".trimIndent()
dockerImage = "node:%docker.node.version%"
}
@ -44,7 +44,7 @@ object OpenSourceProjects_Storybook_SmokeTests : BuildType({
set -e -x
cd examples/official-storybook
yarn storybook --smoke-test
yarn storybook --smoke-test --quiet
""".trimIndent()
dockerImage = "node:%docker.node.version%"
}

2
CHANGELOG.md
View File

@ -6,6 +6,7 @@
- Core: add cursor images to webpack loader [#4498](https://github.com/storybooks/storybook/pull/4498)
- Storyshots-puppeteer: Allow specifying an existing browser [#4721](https://github.com/storybooks/storybook/pull/4721)
- React-native: close StoryListView after tap again in the current story [#4714](https://github.com/storybooks/storybook/pull/4714)
#### Dependency Upgrades
@ -47,6 +48,7 @@ Publish failed
- Angular: Fixes component imports from dist [#4682](https://github.com/storybooks/storybook/pull/4682)
- Addon-info: Improve accessibility with contrast [#4698](https://github.com/storybooks/storybook/pull/4698)
- Ember: update ergonomics to not require any manual setup [#4594](https://github.com/storybooks/storybook/pull/4594)
- React-native: fix accessibility for component preview (iOS+VoiceOver) [#4601](https://github.com/storybooks/storybook/pull/4601)
#### Maintenance

2
addons/ondevice-knobs/package.json
View File

@ -32,7 +32,7 @@
"react-native-switch": "^1.5.0"
},
"peerDependencies": {
"@storybook/addon-knobs": "4.0.0",
"@storybook/addon-knobs": "4.1.0-alpha.1",
"react": "*",
"react-native": "*"
}

2
addons/storyshots/storyshots-core/package.json
View File

@ -37,7 +37,7 @@
"devDependencies": {
"@storybook/addon-actions": "4.1.0-alpha.1",
"@storybook/addon-links": "4.1.0-alpha.1",
"@storybook/addons": "4.0.0",
"@storybook/addons": "4.1.0-alpha.1",
"@storybook/react": "4.1.0-alpha.1",
"enzyme-to-json": "^3.3.4",
"react": "^16.6.0"

5
app/react-native/readme.md
View File

@ -121,6 +121,11 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
-- should the ui be closed initialy.
tabOpen: Number (0)
-- which tab should be open. -1 Navigator, 0 Preview, 1 Addons
initialSelection: Object (null)
-- initialize storybook with a specific story. In case a valid object is passed, it will take precedence over `shouldPersistSelection. ex: `{ kind: 'Knobs', story: 'with knobs' }`
shouldPersistSelection: Boolean (true)
-- initialize storybook with the last selected story.`
)
}
```

1
app/react-native/src/bin/storybook-start.js vendored
View File

@ -5,6 +5,7 @@ import program from 'commander';
import Server from '../server';
program
.allowUnknownOption()
.option('-h, --host <host>', 'host to listen on', 'localhost')
.option('-p, --port <port>', 'port to listen on', 7007)
.option('-s, --secured', 'whether server is running on https')

43
app/react-native/src/preview/index.js vendored
View File

@ -1,7 +1,7 @@
/* eslint-disable react/no-this-in-sfc, no-underscore-dangle */
import React from 'react';
import { NativeModules } from 'react-native';
import { AsyncStorage, NativeModules } from 'react-native';
import parse from 'url-parse';
import addons from '@storybook/addons';
@ -12,6 +12,8 @@ import { StoryStore, ClientApi } from '@storybook/core/client';
import OnDeviceUI from './components/OnDeviceUI';
import StoryView from './components/StoryView';
const STORAGE_KEY = 'lastOpenedStory';
export default class Preview {
constructor() {
this._addons = {};
@ -65,7 +67,7 @@ export default class Preview {
const port = params.port !== false ? `:${params.port || 7007}` : '';
const query = params.query || '';
const { secured } = params;
const { initialSelection, secured, shouldPersistSelection } = params;
const websocketType = secured ? 'wss' : 'ws';
const httpType = secured ? 'https' : 'http';
@ -75,7 +77,7 @@ export default class Preview {
url,
async: onDeviceUI,
onError: () => {
this._setInitialStory();
this._setInitialStory(initialSelection, shouldPersistSelection);
setInitialStory = true;
},
@ -133,8 +135,20 @@ export default class Preview {
channel.emit(Events.GET_CURRENT_STORY);
}
_setInitialStory = () => {
const story = this._getInitialStory();
_setInitialStory = async (initialSelection, shouldPersistSelection = true) => {
let story = this._getInitialStory();
if (initialSelection && this._checkStory(initialSelection)) {
story = initialSelection;
} else if (shouldPersistSelection) {
const value = await AsyncStorage.getItem(STORAGE_KEY);
const previousStory = JSON.parse(value);
if (this._checkStory(previousStory)) {
story = previousStory;
}
}
if (story) {
this._selectStory(story);
}
@ -142,6 +156,7 @@ export default class Preview {
_getInitialStory = () => {
const dump = this._stories.dumpStoryBook();
const nonEmptyKind = dump.find(kind => kind.stories.length > 0);
if (nonEmptyKind) {
return this._getStory({ kind: nonEmptyKind.kind, story: nonEmptyKind.stories[0] });
@ -158,6 +173,24 @@ export default class Preview {
_selectStory(selection) {
const channel = addons.getChannel();
channel.emit(Events.SELECT_STORY, this._getStory(selection));
AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(selection));
}
_checkStory(selection) {
if (!selection || typeof selection !== 'object' || !selection.kind || !selection.story) {
console.warn('invalid storybook selection'); // eslint-disable-line no-console
return null;
}
const story = this._getStory(selection);
if (story.storyFn === null) {
console.warn('invalid storybook selection'); // eslint-disable-line no-console
return null;
}
return story;
}
}

7
app/react/src/client/preview/globals.js
View File

@ -1,6 +1,6 @@
import { window } from 'global';
if (window.parent !== window) {
if (window && window.parent !== window) {
try {
// eslint-disable-next-line no-underscore-dangle
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
@ -8,4 +8,7 @@ if (window.parent !== window) {
// The above line can throw if we do not have access to the parent frame -- i.e. cross origin
}
}
window.STORYBOOK_ENV = 'react';
if (window) {
window.STORYBOOK_ENV = 'react';
}

24
app/react/src/client/preview/index.test.js Normal file
View File

@ -0,0 +1,24 @@
/* eslint-disable global-require */
describe('preview', () => {
afterEach(() => {
jest.resetModules();
});
const isFunction = value => typeof value === 'function';
it('should return the client api in a browser environment', () => {
const api = require('.');
expect(Object.keys(api).length).toBeGreaterThan(0);
expect(Object.values(api).every(isFunction)).toEqual(true);
});
it('should return the client api in a node.js environment', () => {
jest.mock('global', () => ({
document: undefined,
window: undefined,
}));
const api = require('.');
expect(Object.keys(api).length).toBeGreaterThan(0);
expect(Object.values(api).every(isFunction)).toEqual(true);
});
});

2
app/react/src/client/preview/render.js
View File

@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
import { stripIndents } from 'common-tags';
import isReactRenderable from './element_check';
const rootEl = document.getElementById('root');
const rootEl = document ? document.getElementById('root') : null;
function render(node, el) {
ReactDOM.render(

25
app/react/src/server/cra_config.js
View File

@ -1,12 +1,25 @@
import fs from 'fs';
import path from 'path';
import semver from 'semver';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import { normalizeCondition } from 'webpack/lib/RuleSet';
let reactScriptsPath;
function getReactScriptsPath() {
if (reactScriptsPath) return reactScriptsPath;
const appDirectory = fs.realpathSync(process.cwd());
const reactScriptsScriptPath = fs.realpathSync(
path.join(appDirectory, '/node_modules/.bin/react-scripts')
);
reactScriptsPath = path.join(reactScriptsScriptPath, '../..');
return reactScriptsPath;
}
export function isReactScriptsInstalled() {
try {
// eslint-disable-next-line global-require, import/no-extraneous-dependencies
const reactScriptsJson = require('react-scripts/package.json');
// eslint-disable-next-line global-require, import/no-dynamic-require
const reactScriptsJson = require(path.join(getReactScriptsPath(), 'package.json'));
if (semver.lt(reactScriptsJson.version, '2.0.0')) return false;
return true;
} catch (e) {
@ -42,12 +55,12 @@ export function getStyleRules(rules) {
export function getCraWebpackConfig(mode) {
if (mode === 'production') {
// eslint-disable-next-line global-require, import/no-extraneous-dependencies
return require('react-scripts/config/webpack.config.prod');
// eslint-disable-next-line global-require, import/no-dynamic-require
return require(path.join(getReactScriptsPath(), 'config/webpack.config.prod'));
}
// eslint-disable-next-line global-require, import/no-extraneous-dependencies
return require('react-scripts/config/webpack.config.dev');
// eslint-disable-next-line global-require, import/no-dynamic-require
return require(path.join(getReactScriptsPath(), 'config/webpack.config.dev'));
}
export function applyCRAWebpackConfig(baseConfig) {

8
docs/package.json
View File

@ -28,7 +28,7 @@
"common-tags": "^1.8.0",
"gatsby": "^1.9.279",
"gatsby-link": "^1.6.45",
"gatsby-plugin-sharp": "^2.0.10",
"gatsby-plugin-sharp": "^2.0.12",
"gatsby-remark-autolink-headers": "^1.4.19",
"gatsby-remark-copy-linked-files": "^1.5.37",
"gatsby-remark-images": "^1.5.67",
@ -36,7 +36,7 @@
"gatsby-source-filesystem": "^1.5.39",
"gatsby-transformer-remark": "^1.7.44",
"global": "^4.3.2",
"highlight.js": "^9.13.0",
"highlight.js": "^9.13.1",
"lodash": "^4.17.11",
"marked": "^0.5.1",
"prop-types": "^15.6.2",
@ -46,8 +46,8 @@
"react-helmet": "^5.2.0",
"react-router": "^4.3.1",
"react-stack-grid": "^0.7.1",
"sitemap": "^2.0.1",
"snyk": "^1.104.0"
"sitemap": "^2.1.0",
"snyk": "^1.108.0"
},
"snyk": true
}

4
docs/src/pages/addons/addon-gallery/index.md
View File

@ -58,6 +58,10 @@ Viewport allows your stories to be displayed in different sizes and layouts in [
Support google analytics in [Storybook](https://storybook.js.org)
### [Storysource](https://github.com/storybooks/storybook/tree/master/addons/storysource)
Show story source in the addon panel.
## Community Addons
You need to install these addons directly from NPM in order to use them.

4
docs/src/pages/basics/guide-react/index.md
View File

@ -31,11 +31,11 @@ npm i --save-dev @storybook/react
## Add react, react-dom, babel-core, and babel-loader
Make sure that you have `react`, `react-dom`, `babel-core`, and `babel-loader` in your dependencies as well because we list these as a peerDependency:
Make sure that you have `react`, `react-dom`, `@babel/core`, and `babel-loader` in your dependencies as well because we list these as a peerDependency:
```sh
npm i --save react react-dom
npm i --save-dev babel-core
npm i --save-dev @babel/core
npm i --save-dev babel-loader
```

3
docs/src/pages/configurations/standalone-options/index.md
View File

@ -86,4 +86,5 @@ storybook({
port: 9009,
configDir: './.storybook',
});
```
```

75
docs/src/pages/configurations/theming/index.md
View File

@ -57,7 +57,17 @@ overlayBackground: applied to overlay `background`, // 'linear-gradient(to botto
All options above are single key options, in other words, they are variables, and their usage is fixed.
We will extend the theming ability in the future and possibly add more deep theming ability.
Right now we have identified the most likely thing you might want to change the appearance of more then just 1 variable so we allow you the deep-theme the header using: `brand`.
Right now we allow to deep theme: `stories nav panel`. Below are the varaiables that are used to deep theme `stories nav panel`.
storiesNav: deep theme for `stories nav`
```
storiesNav: {
backgroundColor: 'aqua',
}
```
brand: deep theme for brand including `brand name` and `shortcuts`
```
brand: {
@ -65,6 +75,69 @@ brand: {
}
```
brandLink: deep theme for only `brand name`
```
brandLink: {
border: 'none'
}
```
filter: deep thene for `stories filter section`
```
filter: {
backgroundColor: 'red',
}
```
treeHeader: deep thene for `tree header`
```
treeHeader: {
color: 'blue',
}
```
treeMenuHeader: deep thene for `tree menu header` of each menu
```
treeMenuHeader: {
color: 'aqua',
}
```
menuLink: deep thene for `menu link` of each story
```
menuLink: {
color: 'black',
}
```
activeMenuLink: deep thene for `active menu link` for the active story
```
activeMenuLink: {
fontWeight: 'light',
}
```
treeArrow: deep theme for `tree arrow`. This accepts an object which receives `height`, `width`, `base` and `wrapper`
```
treeArrow: {
height: 5,
width: 5,
base: {
fontSize: '12px'
},
wrapper: {
backgroundColor: 'white'
}
}
```
The styles provided here support everything [emotion](https://emotion.sh/) does. So that included things like nested selectors!
## Adding more theme variables for addons

102
docs/yarn.lock
View File

@ -4445,7 +4445,7 @@ elliptic@^6.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.0"
email-validator@^2.0.3:
email-validator@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/email-validator/-/email-validator-2.0.4.tgz#b8dfaa5d0dae28f1b03c95881d904d4e40bfe7ed"
integrity sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==
@ -5741,10 +5741,10 @@ gatsby-plugin-sharp@^1.6.48:
sharp "^0.20.0"
svgo "^0.7.2"
gatsby-plugin-sharp@^2.0.10:
version "2.0.10"
resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.0.10.tgz#5ce703a1d9bc8f70a84a940914404566e747d6f2"
integrity sha512-pUzV/unNX2IFSNlz9u3a/uDevcJMCcril9So7bY+kZrQIb5RbDd2vnZiMebzv7RxfKVa/tpIbPbrZcEaVWVvvQ==
gatsby-plugin-sharp@^2.0.12:
version "2.0.12"
resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.0.12.tgz#c791b29f153e481b8287605bf171331daaba7cb8"
integrity sha512-E3LmPQVY7n27oiWJRvw+C1V9ijR9V3Y2xBl9dFL3NoueLyZmlk0hFRG8gTpCr9e3va04b+tV33mATetcy7mLHw==
dependencies:
"@babel/runtime" "^7.0.0"
async "^2.1.2"
@ -6359,7 +6359,7 @@ graceful-fs@^4.0.0, graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.2
resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=
graphlib@^2.1.1:
graphlib@^2.1.1, graphlib@^2.1.5:
version "2.1.5"
resolved "https://registry.yarnpkg.com/graphlib/-/graphlib-2.1.5.tgz#6afe1afcc5148555ec799e499056795bd6938c87"
integrity sha512-XvtbqCcw+EM5SqQrIetIKKD+uZVNQtDPD1goIg7K73RuRZtVI5rYMdcCVSHm/AS1sCBZ7vt0p5WgXouucHQaOA==
@ -6697,10 +6697,10 @@ he@1.1.x:
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=
highlight.js@^9.13.0:
version "9.13.0"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.0.tgz#ee96d5c5f4c456e440f2dbdb2752211dff56f671"
integrity sha512-2B90kcNnErqRTmzdZw6IPLEC9CdsiIMhj+r8L3LJKRCgtEJ+LY5yzWuQCVnADTI0wwocQinFzaaL/JjTQNqI/g==
highlight.js@^9.13.1:
version "9.13.1"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e"
integrity sha512-Sc28JNQNDzaH6PORtRLMvif9RSn1mYuOoX3omVjnb0+HbpPygU2ALBI0R/wsiqCb4/fcp07Gdo8g+fhtFrQl6A==
history@^4.6.2, history@^4.7.2:
version "4.7.2"
@ -6752,7 +6752,7 @@ homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1:
dependencies:
parse-passwd "^1.0.0"
hosted-git-info@^2.1.4, hosted-git-info@^2.5.0:
hosted-git-info@^2.1.4, hosted-git-info@^2.5.0, hosted-git-info@^2.7.1:
version "2.7.1"
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
integrity sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==
@ -7832,7 +7832,7 @@ js-tokens@^3.0.2:
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
js-yaml@^3.10.0, js-yaml@^3.5.2, js-yaml@^3.5.3, js-yaml@^3.9.0:
js-yaml@^3.10.0, js-yaml@^3.12.0, js-yaml@^3.5.2, js-yaml@^3.9.0:
version "3.12.0"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
integrity sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==
@ -8285,7 +8285,7 @@ lodash.clone@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.clone/-/lodash.clone-4.5.0.tgz#195870450f5a13192478df4bc3d23d2dea1907b6"
integrity sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y=
lodash.clonedeep@^4.3.0, lodash.clonedeep@^4.3.1, lodash.clonedeep@^4.5.0:
lodash.clonedeep@^4.3.0, lodash.clonedeep@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
@ -12416,7 +12416,7 @@ semver-truncate@^1.0.0:
dependencies:
semver "^5.3.0"
"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1:
"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
version "5.6.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==
@ -12722,10 +12722,10 @@ simple-swizzle@^0.2.2:
dependencies:
is-arrayish "^0.3.1"
sitemap@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/sitemap/-/sitemap-2.0.1.tgz#24f9ae89efeadd80e85e91b7247165497a5e655b"
integrity sha512-MRCugXgkX9BoKweEljgPPqEfvezcHdzjxLI2nKmemlkfsOiGumJBrjotEF+BtMaq7a/AREGXIMok+0GntJgdhw==
sitemap@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/sitemap/-/sitemap-2.1.0.tgz#1633cb88c196d755ad94becfb1c1bcacc6d3425a"
integrity sha512-AkfA7RDVCITQo+j5CpXsMJlZ/8ENO2NtgMHYIh+YMvex2Hao/oe3MQgNa03p0aWY6srCfUA1Q02OgiWCAiuccA==
dependencies:
lodash "^4.17.10"
url-join "^4.0.0"
@ -12780,10 +12780,10 @@ snyk-config@2.2.0:
lodash "^4.17.5"
nconf "^0.10.0"
snyk-docker-plugin@1.12.0:
version "1.12.0"
resolved "https://registry.yarnpkg.com/snyk-docker-plugin/-/snyk-docker-plugin-1.12.0.tgz#6cbf61416946936cbb7bf07bb8293bf7dcdd33be"
integrity sha512-QqKq2bGdnf1L2PNGQrHoqcoaV/PIlJv1qjKIzwA93gfhToKGkgJ31oPXwfef/l9N+ui0Y44c4POBHFbFf8PlJw==
snyk-docker-plugin@1.12.1:
version "1.12.1"
resolved "https://registry.yarnpkg.com/snyk-docker-plugin/-/snyk-docker-plugin-1.12.1.tgz#66d896b18392b05bff3b34e2e47a19f7c0b7ce16"
integrity sha512-9/k+tZORb0CUoE+nFvG+ADc6vzHAkgiGR/7aZ35vxpuc9vW37LFWjmXZAfyoiGNOn1ICrPxSxarah8YsFEwE8Q==
dependencies:
debug "^3"
tslib "^1"
@ -12804,7 +12804,15 @@ snyk-gradle-plugin@2.1.0:
dependencies:
clone-deep "^0.3.0"
snyk-module@1.8.2, snyk-module@^1.6.0, snyk-module@^1.8.2:
snyk-module@1.9.1, snyk-module@^1.9.1:
version "1.9.1"
resolved "https://registry.yarnpkg.com/snyk-module/-/snyk-module-1.9.1.tgz#b2a78f736600b0ab680f1703466ed7309c980804"
integrity sha512-A+CCyBSa4IKok5uEhqT+hV/35RO6APFNLqk9DRRHg7xW2/j//nPX8wTSZUPF8QeRNEk/sX+6df7M1y6PBHGSHA==
dependencies:
debug "^3.1.0"
hosted-git-info "^2.7.1"
snyk-module@^1.6.0:
version "1.8.2"
resolved "https://registry.yarnpkg.com/snyk-module/-/snyk-module-1.8.2.tgz#bd3c11b46a90b8ccb0a04a18b387b1d0e5b10291"
integrity sha512-XqhdbZ/CUuJ5gSaYdYfapLqx9qm2Mp6nyRMBCLXe9tJSiohOJsc9fQuUDbdOiRCqpA4BD6WLl+qlwOJmJoszBg==
@ -12817,15 +12825,17 @@ snyk-mvn-plugin@2.0.0:
resolved "https://registry.yarnpkg.com/snyk-mvn-plugin/-/snyk-mvn-plugin-2.0.0.tgz#875dcfe0d77b50396321552f2469ee69ca8d1416"
integrity sha512-9jAhZhv+7YcqtoQYCYlgMoxK+dWBKlk+wkX27Ebg3vNddNop9q5jZitRXTjsXwfSUZHRt+Ptw1f8vei9kjzZVg==
snyk-nodejs-lockfile-parser@1.5.3:
version "1.5.3"
resolved "https://registry.yarnpkg.com/snyk-nodejs-lockfile-parser/-/snyk-nodejs-lockfile-parser-1.5.3.tgz#af66ed7351bea42d206d93a95b68b10259416d0b"
integrity sha512-hVUUxRm7f8mN3RdTbeZGJn+w4VMKb7ke4/OB8Qhr4O5S04AMb4YOcsZ80niur05VUykPT32IyFwyGRTBi99WUw==
snyk-nodejs-lockfile-parser@1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/snyk-nodejs-lockfile-parser/-/snyk-nodejs-lockfile-parser-1.7.0.tgz#d44c5d027051aeb5a0845c9a4c163323e4c5e1d3"
integrity sha512-57Gnw8o3HQbheb808GRsofnYPaJCbpt7n+zec+C7J/GZE6GJk+WA2u1EPsNQAsfTLQ3rxBwA1Sonhg498T4COA==
dependencies:
"@yarnpkg/lockfile" "^1.0.2"
graphlib "^2.1.5"
lodash "4.17.10"
source-map-support "^0.5.7"
tslib "^1.9.3"
uuid "^3.3.2"
snyk-nuget-plugin@1.6.5:
version "1.6.5"
@ -12846,19 +12856,19 @@ snyk-php-plugin@1.5.1:
lodash "^4.17.5"
path "0.12.7"
snyk-policy@1.12.0:
version "1.12.0"
resolved "https://registry.yarnpkg.com/snyk-policy/-/snyk-policy-1.12.0.tgz#5167cbc4a28b2046b82234f866e49ee4fea1f52a"
integrity sha512-CEioNnDzccHyid7UIVl3bJ1dnG4co4ofI+KxuC1mo0IUXy64gxnBTeVoZF5gVLWbAyxGxSeW8f0+8GmWMHVb7w==
snyk-policy@1.13.1:
version "1.13.1"
resolved "https://registry.yarnpkg.com/snyk-policy/-/snyk-policy-1.13.1.tgz#2366cc485e83a6b43f23f45b36085726e0bf448b"
integrity sha512-l9evS3Yk70xyvajjg+I6Ij7fr7gxpVRMZl0J1xNpWps/IVu4DSGih3aMmXi47VJozr4A/eFyj7R1lIr2GhqJCA==
dependencies:
debug "^3.1.0"
email-validator "^2.0.3"
js-yaml "^3.5.3"
lodash.clonedeep "^4.3.1"
semver "^5.5.0"
snyk-module "^1.8.2"
email-validator "^2.0.4"
js-yaml "^3.12.0"
lodash.clonedeep "^4.5.0"
semver "^5.6.0"
snyk-module "^1.9.1"
snyk-resolve "^1.0.1"
snyk-try-require "^1.1.1"
snyk-try-require "^1.3.1"
then-fs "^2.0.0"
snyk-python-plugin@1.9.0:
@ -12909,7 +12919,7 @@ snyk-tree@^1.0.0:
dependencies:
archy "^1.0.0"
snyk-try-require@1.3.1, snyk-try-require@^1.1.1:
snyk-try-require@1.3.1, snyk-try-require@^1.1.1, snyk-try-require@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/snyk-try-require/-/snyk-try-require-1.3.1.tgz#6e026f92e64af7fcccea1ee53d524841e418a212"
integrity sha1-bgJvkuZK9/zM6h7lPVJIQeQYohI=
@ -12919,10 +12929,10 @@ snyk-try-require@1.3.1, snyk-try-require@^1.1.1:
lru-cache "^4.0.0"
then-fs "^2.0.0"
snyk@^1.104.0:
version "1.104.1"
resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.104.1.tgz#aff4a717b99eed424f8df2b928b67ac0b77b3748"
integrity sha512-K72W1O57nnSE+XokbuxC7Q0T9tAaMF6V/CoHv6ifAQlOvOkj/0rFbA8zMNMgzRs4LfQj183Zt5D0B0cyFDrKJQ==
snyk@^1.108.0:
version "1.108.0"
resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.108.0.tgz#1aff9b6cbd39d27dd9895fefed45b0f225518aca"
integrity sha512-QKeERkklW4DFyd49sqbwZ4xNYXtHOPCcUjNUzDfcvXzNwyxfRKhTf43nmPw6lnIcgBesrY95hMozos4WmgYl3w==
dependencies:
abbrev "^1.1.1"
ansi-escapes "^3.1.0"
@ -12940,15 +12950,15 @@ snyk@^1.104.0:
recursive-readdir "^2.2.2"
semver "^5.5.0"
snyk-config "2.2.0"
snyk-docker-plugin "1.12.0"
snyk-docker-plugin "1.12.1"
snyk-go-plugin "1.6.0"
snyk-gradle-plugin "2.1.0"
snyk-module "1.8.2"
snyk-module "1.9.1"
snyk-mvn-plugin "2.0.0"
snyk-nodejs-lockfile-parser "1.5.3"
snyk-nodejs-lockfile-parser "1.7.0"
snyk-nuget-plugin "1.6.5"
snyk-php-plugin "1.5.1"
snyk-policy "1.12.0"
snyk-policy "1.13.1"
snyk-python-plugin "1.9.0"
snyk-resolve "1.0.1"
snyk-resolve-deps "4.0.2"

2
examples-native/crna-kitchen-sink/package.json
View File

@ -15,7 +15,7 @@
"preset": "jest-expo"
},
"dependencies": {
"expo": "^30.0.1",
"expo": "^31.0.4",
"prop-types": "^15.6.2",
"react": "^16.2.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",

2
lib/cli/test/run_tests.sh
View File

@ -62,7 +62,7 @@ do
echo "Running smoke test in $dir"
failed=0
yarn storybook --smoke-test || failed=1
yarn storybook --smoke-test --quiet || failed=1
if [ $teamcity -eq 1 ]
then

14
lib/components/src/header/header.js
View File

@ -8,7 +8,7 @@ const Wrapper = styled.div(({ theme }) => ({
...theme.brand,
}));
const HeadingLink = styled.a({
const HeadingLink = styled.a(({ theme }) => ({
textDecoration: 'none',
flexGrow: 1,
display: 'flex',
@ -26,7 +26,8 @@ const HeadingLink = styled.a({
padding: '5px',
margin: 0,
overflow: 'hidden',
});
...theme.brandLink,
}));
const ShortHelpButton = styled.button({
textTransform: 'uppercase',
@ -48,9 +49,12 @@ const ShortHelpButton = styled.button({
const Header = ({ openShortcutsHelp, name, url, enableShortcutsHelp, isMobileDevice }) => (
<Wrapper isMobileDevice={isMobileDevice}>
<HeadingLink href={url} target="_blank" rel="noopener noreferrer">
{name}
</HeadingLink>
<HeadingLink
href={url}
target="_blank"
rel="noopener noreferrer"
dangerouslySetInnerHTML={{ __html: name }}
/>
{enableShortcutsHelp && <ShortHelpButton onClick={openShortcutsHelp}>⌘</ShortHelpButton>}
</Wrapper>
);

2
lib/components/src/icons/chevronRight.js
View File

@ -2,13 +2,13 @@ import React from 'react';
export default props => (
<svg
{...props}
fill="currentColor"
preserveAspectRatio="xMidYMid meet"
height="10"
width="10"
viewBox="0 0 40 40"
style={{ verticalAlign: 'top', fill: 'currentcolor' }}
{...props}
>
<g>
<path d="m23.3 20l-13.1-13.6c-0.3-0.3-0.3-0.9 0-1.2l2.4-2.4c0.3-0.3 0.9-0.4 1.2-0.1l16 16.7c0.1 0.1 0.2 0.4 0.2 0.6s-0.1 0.5-0.2 0.6l-16 16.7c-0.3 0.3-0.9 0.3-1.2 0l-2.4-2.5c-0.3-0.3-0.3-0.9 0-1.2z" />

21
lib/components/src/layout/desktop.js
View File

@ -61,15 +61,18 @@ const GlobalStyles = () => (
/>
);
const StoriesPanelWrapper = styled.div(({ showStoriesPanel, storiesPanelOnTop }) => ({
boxSizing: 'border-box',
width: '100%',
height: '100%',
display: showStoriesPanel ? 'flex' : 'none',
flexDirection: storiesPanelOnTop ? 'column' : 'row',
alignItems: 'stretch',
paddingRight: storiesPanelOnTop ? 10 : 0,
}));
const StoriesPanelWrapper = styled.div(
({ showStoriesPanel, storiesPanelOnTop, theme: { storiesNav } }) => ({
boxSizing: 'border-box',
width: '100%',
height: '100%',
display: showStoriesPanel ? 'flex' : 'none',
flexDirection: storiesPanelOnTop ? 'column' : 'row',
alignItems: 'stretch',
paddingRight: storiesPanelOnTop ? 10 : 0,
...storiesNav,
})
);
const StoriesPanelInner = styled.div({
flexGrow: 1,

3
lib/components/src/layout/mobile.js
View File

@ -5,7 +5,7 @@ import styled from '@emotion/styled';
import { Tab, TabBar } from '../tabs/tabs';
const MobilePanel = styled.div(
({ selected }) =>
({ selected, theme }) =>
selected
? {
display: 'block',
@ -16,6 +16,7 @@ const MobilePanel = styled.div(
width: '100vw',
overflow: 'auto',
WebkitOverflowScrolling: 'touch',
...theme.storiesNav,
}
: {
display: 'none',

4
lib/components/src/navigation/MenuLink.js
View File

@ -13,14 +13,16 @@ const MenuLink = styled(RoutedLink, { rootEl: 'a' })(
marginLeft: '5px',
position: 'relative',
zIndex: 1,
...theme.menuLink,
}),
({ active }) =>
({ theme, active }) =>
active
? {
color: 'inherit',
fontWeight: 'bold',
backgroundColor: 'rgba(0,0,0,0.07)',
zIndex: 0,
...theme.activeMenuLink,
}
: {}
);

32
lib/components/src/theme.js
View File

@ -36,8 +36,24 @@ export const normal = {
overlayBackground:
'linear-gradient(to bottom right, rgba(233, 233, 233, 0.6), rgba(255, 255, 255, 0.8))',
storiesNav: {},
brand: {},
brandLink: {},
filter: {},
treeHeader: {},
treeMenuHeader: {},
menuLink: {},
activeMenuLink: {},
treeArrow: {},
addonActionsTheme: {
...chromeLight,
BASE_FONT_FAMILY: monoFonts.fontFamily,
@ -67,10 +83,26 @@ export const dark = {
overlayBackground:
'linear-gradient(to bottom right, rgba(17, 17, 34, 0.6), rgba(51, 51, 51, 0.8))',
storiesNav: {},
brand: {
background: 'rgba(0,0,0,1)',
},
brandLink: {},
filter: {},
treeHeader: {},
treeMenuHeader: {},
menuLink: {},
activeMenuLink: {},
treeArrow: {},
addonActionsTheme: {
...chromeDark,
BASE_FONT_FAMILY: monoFonts.fontFamily,

2
lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot
View File

@ -170,7 +170,7 @@ exports[`Storyshots UI|stories/StoriesPanel with storiesHierarchies prop 1`] = `
fill="currentColor"
height="10"
preserveAspectRatio="xMidYMid meet"
style="vertical-align:top;fill:currentcolor"
style="vertical-align:top;fill:currentColor"
viewBox="0 0 40 40"
width="10"
>

22
lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot
View File

@ -54,7 +54,7 @@ exports[`Storyshots UI|stories/Stories simple 1`] = `
fill="currentColor"
height="10"
preserveAspectRatio="xMidYMid meet"
style="vertical-align:top;fill:currentcolor"
style="vertical-align:top;fill:currentColor"
viewBox="0 0 40 40"
width="10"
>
@ -99,7 +99,7 @@ exports[`Storyshots UI|stories/Stories simple 1`] = `
fill="currentColor"
height="10"
preserveAspectRatio="xMidYMid meet"
style="vertical-align:top;fill:currentcolor"
style="vertical-align:top;fill:currentColor"
viewBox="0 0 40 40"
width="10"
>
@ -212,7 +212,7 @@ exports[`Storyshots UI|stories/Stories with hierarchy - hierarchySeparator is de
fill="currentColor"
height="10"
preserveAspectRatio="xMidYMid meet"
style="vertical-align:top;fill:currentcolor"
style="vertical-align:top;fill:currentColor"
viewBox="0 0 40 40"
width="10"
>
@ -257,7 +257,7 @@ exports[`Storyshots UI|stories/Stories with hierarchy - hierarchySeparator is de
fill="currentColor"
height="10"
preserveAspectRatio="xMidYMid meet"
style="vertical-align:top;fill:currentcolor"
style="vertical-align:top;fill:currentColor"
viewBox="0 0 40 40"
width="10"
>
@ -304,7 +304,7 @@ exports[`Storyshots UI|stories/Stories with hierarchy - hierarchySeparator is de
fill="currentColor"
height="10"
preserveAspectRatio="xMidYMid meet"
style="vertical-align:top;fill:currentcolor"
style="vertical-align:top;fill:currentColor"
viewBox="0 0 40 40"
width="10"
>
@ -351,7 +351,7 @@ exports[`Storyshots UI|stories/Stories with hierarchy - hierarchySeparator is de
fill="currentColor"
height="10"
preserveAspectRatio="xMidYMid meet"
style="vertical-align:top;fill:currentcolor"
style="vertical-align:top;fill:currentColor"
viewBox="0 0 40 40"
width="10"
>
@ -470,7 +470,7 @@ exports[`Storyshots UI|stories/Stories with highlighting when storiesFilter is p
fill="currentColor"
height="10"
preserveAspectRatio="xMidYMid meet"
style="vertical-align:top;fill:currentcolor"
style="vertical-align:top;fill:currentColor"
viewBox="0 0 40 40"
width="10"
>
@ -527,7 +527,7 @@ exports[`Storyshots UI|stories/Stories with highlighting when storiesFilter is p
fill="currentColor"
height="10"
preserveAspectRatio="xMidYMid meet"
style="vertical-align:top;fill:currentcolor"
style="vertical-align:top;fill:currentColor"
viewBox="0 0 40 40"
width="10"
>
@ -574,7 +574,7 @@ exports[`Storyshots UI|stories/Stories with highlighting when storiesFilter is p
fill="currentColor"
height="10"
preserveAspectRatio="xMidYMid meet"
style="vertical-align:top;fill:currentcolor"
style="vertical-align:top;fill:currentColor"
viewBox="0 0 40 40"
width="10"
>
@ -693,7 +693,7 @@ exports[`Storyshots UI|stories/Stories without hierarchy - hierarchySeparator is
fill="currentColor"
height="10"
preserveAspectRatio="xMidYMid meet"
style="vertical-align:top;fill:currentcolor"
style="vertical-align:top;fill:currentColor"
viewBox="0 0 40 40"
width="10"
>
@ -738,7 +738,7 @@ exports[`Storyshots UI|stories/Stories without hierarchy - hierarchySeparator is
fill="currentColor"
height="10"
preserveAspectRatio="xMidYMid meet"
style="vertical-align:top;fill:currentcolor"
style="vertical-align:top;fill:currentColor"
viewBox="0 0 40 40"
width="10"
>

38
lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js
View File

@ -2,6 +2,7 @@ import { decorators } from 'react-treebeard';
import { Icons } from '@storybook/components';
import React from 'react';
import PropTypes from 'prop-types';
import { withCSSContext } from '@emotion/core';
import { MenuLink } from '../../../containers/routed_link';
import MenuItem from '../../menu_item';
import treeNodeTypes from './tree_node_type';
@ -9,19 +10,29 @@ import { highlightNode } from './tree_decorators_utils';
function noop() {}
function ToggleDecorator({ style }) {
function ToggleDecorator({ style, theme }) {
const { height, width, arrow } = style;
const { treeArrow } = theme;
const baseStyles =
treeArrow && treeArrow.base ? { ...style.base, ...treeArrow.base } : style.base;
const wrapperStyles =
treeArrow && treeArrow.wrapper ? { ...style.wrapper, ...treeArrow.wrapper } : style.wrapper;
const chevronHeight = treeArrow && treeArrow.height ? treeArrow.height : height;
const chevronWeight = treeArrow && treeArrow.width ? treeArrow.height : width;
const arrowStyles = treeArrow && treeArrow.arrow ? { ...arrow, ...treeArrow.arrow } : arrow;
return (
<div style={style.base}>
<div style={style.wrapper}>
<Icons.ChevronRight height={height} width={width} style={arrow} />
<div style={baseStyles}>
<div style={wrapperStyles}>
<Icons.ChevronRight height={chevronHeight} width={chevronWeight} style={arrowStyles} />
</div>
</div>
);
}
ToggleDecorator.propTypes = {
theme: PropTypes.shape({}),
style: PropTypes.shape({
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
@ -29,8 +40,12 @@ ToggleDecorator.propTypes = {
}).isRequired,
};
ToggleDecorator.defaultProps = {
theme: {},
};
function ContainerDecorator(props) {
const { node, style, onClick } = props;
const { node, style, onClick, theme } = props;
const { container, ...restStyles } = style;
if (node.root) {
@ -40,9 +55,11 @@ function ContainerDecorator(props) {
const containerStyle = container.reduce((acc, styles) => ({ ...acc, ...styles }), {});
const innerContainer = <decorators.Container {...props} style={restStyles} onClick={noop} />;
const containerStyles = { ...containerStyle, ...theme.treeMenuHeader };
if (node.type !== treeNodeTypes.STORY) {
return (
<MenuItem style={containerStyle} onClick={onClick} data-name={node.name}>
<MenuItem style={containerStyles} onClick={onClick} data-name={node.name}>
{innerContainer}
</MenuItem>
);
@ -66,6 +83,7 @@ function ContainerDecorator(props) {
}
ContainerDecorator.propTypes = {
theme: PropTypes.shape({}),
style: PropTypes.shape({
container: PropTypes.array.isRequired,
}).isRequired,
@ -80,6 +98,10 @@ ContainerDecorator.propTypes = {
onClick: PropTypes.func.isRequired,
};
ContainerDecorator.defaultProps = {
theme: {},
};
function HeaderDecorator(props) {
const { style, node, ...restProps } = props;
@ -116,6 +138,6 @@ HeaderDecorator.propTypes = {
export default {
...decorators,
Header: HeaderDecorator,
Container: ContainerDecorator,
Toggle: ToggleDecorator,
Container: withCSSContext((props, { theme }) => <ContainerDecorator {...props} theme={theme} />),
Toggle: withCSSContext((props, { theme }) => <ToggleDecorator {...props} theme={theme} />),
};

1
lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js
View File

@ -12,6 +12,7 @@ const TreeHeader = styled.h4(({ theme }) => ({
padding: '0 13px 5px 13px',
margin: 0,
overflow: 'hidden',
...theme.treeHeader,
}));
TreeHeader.propTypes = {

1
lib/ui/src/modules/ui/components/stories_panel/text_filter.js
View File

@ -24,6 +24,7 @@ const Input = styled.input(({ theme }) => ({
border: '0 none',
outline: 'none',
borderRadius: 2,
...theme.filter,
}));
const ClearButton = styled.button({

6
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/root",
"version": "4.0.0",
"version": "4.1.0-alpha.1",
"private": true,
"repository": {
"type": "git",
@ -22,7 +22,6 @@
"build-storybooks": "./scripts/build-storybooks.sh",
"changelog": "pr-log --sloppy",
"chromatic": "npm --prefix examples/official-storybook run chromatic",
"precommit": "lint-staged",
"coverage": "codecov",
"danger": "danger",
"dev": "concurrently --kill-others \"yarn dev:ts\" \"yarn dev:js\"",
@ -122,6 +121,9 @@
"tslint-plugin-prettier": "^2.0.1",
"typescript": "^3.1.6"
},
"husky": {
"precommit": "yarn lint-staged"
},
"resolutions": {
"graphql": "^0.13.2"
},

6
yarn.lock
View File

@ -5700,9 +5700,9 @@ cache-base@^1.0.1:
unset-value "^1.0.0"
cached-path-relative@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/cached-path-relative/-/cached-path-relative-1.0.1.tgz#d09c4b52800aa4c078e2dd81a869aac90d2e54e7"
integrity sha1-0JxLUoAKpMB44t2BqGmqyQ0uVOc=
version "1.0.2"
resolved "https://registry.yarnpkg.com/cached-path-relative/-/cached-path-relative-1.0.2.tgz#a13df4196d26776220cc3356eb147a52dba2c6db"
integrity sha512-5r2GqsoEb4qMTTN9J+WzXfjov+hjxT+j3u5K+kIVNIwAd99DLCJE9pBIMP1qVeybV6JiijL385Oz0DcYxfbOIg==
calculate-cache-key-for-tree@^1.1.0:
version "1.1.0"