From bbaf337700153b8fbf5c58424fc2187b7913d47f Mon Sep 17 00:00:00 2001 From: Mansoor Basha Bellary Date: Fri, 2 Nov 2018 23:15:58 -0400 Subject: [PATCH 01/19] feat(storiesNav): deep theming for stories nav panel - updating README file with all the deep theme variables supported - updating `HeadingLink` component to support html strings for `brand`. So that `image` can be used for `brand` - placing `props` to last in `chevronRight` component, so that it overrides the theme props passed --- .../standalone-options/index.md | 3 +- .../src/pages/configurations/theming/index.md | 75 ++++++++++++++++++- lib/components/src/header/header.js | 14 ++-- lib/components/src/icons/chevronRight.js | 2 +- lib/components/src/layout/desktop.js | 21 +++--- lib/components/src/layout/mobile.js | 3 +- lib/components/src/navigation/MenuLink.js | 4 +- lib/components/src/theme.js | 32 ++++++++ .../__snapshots__/index.stories.storyshot | 2 +- .../__snapshots__/index.stories.storyshot | 22 +++--- .../stories_tree/tree_decorators.js | 38 ++++++++-- .../stories_panel/stories_tree/tree_header.js | 1 + .../components/stories_panel/text_filter.js | 1 + 13 files changed, 179 insertions(+), 39 deletions(-) diff --git a/docs/src/pages/configurations/standalone-options/index.md b/docs/src/pages/configurations/standalone-options/index.md index 3304204dd3c..ead9289bb3f 100644 --- a/docs/src/pages/configurations/standalone-options/index.md +++ b/docs/src/pages/configurations/standalone-options/index.md @@ -86,4 +86,5 @@ storybook({ port: 9009, configDir: './.storybook', }); -``` \ No newline at end of file +``` + diff --git a/docs/src/pages/configurations/theming/index.md b/docs/src/pages/configurations/theming/index.md index 6cb4c29c651..b30d0ebd6c8 100644 --- a/docs/src/pages/configurations/theming/index.md +++ b/docs/src/pages/configurations/theming/index.md @@ -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 diff --git a/lib/components/src/header/header.js b/lib/components/src/header/header.js index a8a014e8d3b..c4d33a336cb 100755 --- a/lib/components/src/header/header.js +++ b/lib/components/src/header/header.js @@ -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 }) => ( - - {name} - + {enableShortcutsHelp && ⌘} ); diff --git a/lib/components/src/icons/chevronRight.js b/lib/components/src/icons/chevronRight.js index 017a71182e1..d29479b49d6 100644 --- a/lib/components/src/icons/chevronRight.js +++ b/lib/components/src/icons/chevronRight.js @@ -2,13 +2,13 @@ import React from 'react'; export default props => ( diff --git a/lib/components/src/layout/desktop.js b/lib/components/src/layout/desktop.js index 365eb9b8ad4..d11a1b9502b 100644 --- a/lib/components/src/layout/desktop.js +++ b/lib/components/src/layout/desktop.js @@ -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, diff --git a/lib/components/src/layout/mobile.js b/lib/components/src/layout/mobile.js index 54ed018edc4..abe8a7a7448 100644 --- a/lib/components/src/layout/mobile.js +++ b/lib/components/src/layout/mobile.js @@ -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', diff --git a/lib/components/src/navigation/MenuLink.js b/lib/components/src/navigation/MenuLink.js index 45097f6a44a..300c04281b8 100644 --- a/lib/components/src/navigation/MenuLink.js +++ b/lib/components/src/navigation/MenuLink.js @@ -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, } : {} ); diff --git a/lib/components/src/theme.js b/lib/components/src/theme.js index 491e6a1f69f..3fb82dc1741 100644 --- a/lib/components/src/theme.js +++ b/lib/components/src/theme.js @@ -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, diff --git a/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot b/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot index 8f8c470ed6a..640fad0ef77 100644 --- a/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot +++ b/lib/ui/src/modules/ui/components/stories_panel/__snapshots__/index.stories.storyshot @@ -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" > diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot index c28b7cc0c3a..80b33b3c3a2 100644 --- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot +++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/__snapshots__/index.stories.storyshot @@ -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" > diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js index 2cb3731f613..537dae49630 100644 --- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js +++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_decorators.js @@ -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 ( -
-
- +
+
+
); } 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 = ; + const containerStyles = { ...containerStyle, ...theme.treeMenuHeader }; + if (node.type !== treeNodeTypes.STORY) { return ( - + {innerContainer} ); @@ -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 }) => ), + Toggle: withCSSContext((props, { theme }) => ), }; diff --git a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js index 5d1a9221bd3..9654221cfbf 100644 --- a/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js +++ b/lib/ui/src/modules/ui/components/stories_panel/stories_tree/tree_header.js @@ -12,6 +12,7 @@ const TreeHeader = styled.h4(({ theme }) => ({ padding: '0 13px 5px 13px', margin: 0, overflow: 'hidden', + ...theme.treeHeader, })); TreeHeader.propTypes = { diff --git a/lib/ui/src/modules/ui/components/stories_panel/text_filter.js b/lib/ui/src/modules/ui/components/stories_panel/text_filter.js index 075b680a0eb..074cfb26fd5 100755 --- a/lib/ui/src/modules/ui/components/stories_panel/text_filter.js +++ b/lib/ui/src/modules/ui/components/stories_panel/text_filter.js @@ -24,6 +24,7 @@ const Input = styled.input(({ theme }) => ({ border: '0 none', outline: 'none', borderRadius: 2, + ...theme.filter, })); const ClearButton = styled.button({ From 7ba01935bb4cdd79696332fc67fb3fc66dbb950a Mon Sep 17 00:00:00 2001 From: Brody McKee Date: Sun, 4 Nov 2018 15:51:10 +0200 Subject: [PATCH 02/19] Add support for custom react-scripts packages --- app/react/src/server/cra_config.js | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/app/react/src/server/cra_config.js b/app/react/src/server/cra_config.js index 4a8cdda3339..a343b82c0fd 100644 --- a/app/react/src/server/cra_config.js +++ b/app/react/src/server/cra_config.js @@ -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) { From ff05d12ae09de42b7875f9a9b34a214df3e17eba Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" Date: Tue, 6 Nov 2018 06:22:24 +0000 Subject: [PATCH 03/19] Update expo requirement Updates the requirements on [expo](https://github.com/expo/expo-sdk) to permit the latest version. - [Release notes](https://github.com/expo/expo-sdk/releases) - [Commits](https://github.com/expo/expo-sdk/commits) Signed-off-by: dependabot[bot] --- examples-native/crna-kitchen-sink/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples-native/crna-kitchen-sink/package.json b/examples-native/crna-kitchen-sink/package.json index fa898df8898..9fcfda0150d 100644 --- a/examples-native/crna-kitchen-sink/package.json +++ b/examples-native/crna-kitchen-sink/package.json @@ -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", From 4171b26ace34c06b6e57948346aa29e3ca4b68b4 Mon Sep 17 00:00:00 2001 From: Shamin Meerankutty Date: Tue, 6 Nov 2018 13:21:51 +0530 Subject: [PATCH 04/19] Changed babel-core to @babel/core in react docs --- docs/src/pages/basics/guide-react/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/basics/guide-react/index.md b/docs/src/pages/basics/guide-react/index.md index 6366bc11d8c..30a240e65ee 100644 --- a/docs/src/pages/basics/guide-react/index.md +++ b/docs/src/pages/basics/guide-react/index.md @@ -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 ``` From b4b810a7bac00fc55c3378fea70c93242d315c0f Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" Date: Tue, 6 Nov 2018 13:28:42 +0000 Subject: [PATCH 05/19] Bump gatsby-plugin-sharp from 2.0.10 to 2.0.12 in /docs (#4731) --- docs/package.json | 2 +- docs/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/package.json b/docs/package.json index e50a0a9e0db..c825eea06a0 100644 --- a/docs/package.json +++ b/docs/package.json @@ -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", diff --git a/docs/yarn.lock b/docs/yarn.lock index 9f8536e88ea..f53189ede4b 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -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" From 9e93c2e5956b4914382c7395ef81161483fc5ad2 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" Date: Tue, 6 Nov 2018 13:49:36 +0000 Subject: [PATCH 06/19] Bump sitemap from 2.0.1 to 2.1.0 in /docs (#4733) --- docs/package.json | 2 +- docs/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/package.json b/docs/package.json index c825eea06a0..d5f44ac31d4 100644 --- a/docs/package.json +++ b/docs/package.json @@ -46,7 +46,7 @@ "react-helmet": "^5.2.0", "react-router": "^4.3.1", "react-stack-grid": "^0.7.1", - "sitemap": "^2.0.1", + "sitemap": "^2.1.0", "snyk": "^1.104.0" }, "snyk": true diff --git a/docs/yarn.lock b/docs/yarn.lock index f53189ede4b..fe0d538eb27 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -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" From 7103146a7743c43f0bca1b03fa79b6b544018a2a Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" Date: Tue, 6 Nov 2018 14:13:36 +0000 Subject: [PATCH 07/19] Bump highlight.js from 9.13.0 to 9.13.1 in /docs (#4735) --- docs/package.json | 2 +- docs/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/package.json b/docs/package.json index d5f44ac31d4..f4b5fc8469e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -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", diff --git a/docs/yarn.lock b/docs/yarn.lock index fe0d538eb27..3ed75801871 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -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" From ac0492fa9d676a58c14c383201da3985fe5fad2b Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" Date: Tue, 6 Nov 2018 15:09:38 +0000 Subject: [PATCH 08/19] Merge branch 'next' into dependabot/npm_and_yarn/docs/snyk-1.108.0 (#4734) --- docs/package.json | 2 +- docs/yarn.lock | 78 ++++++++++++++++++++++++++--------------------- 2 files changed, 45 insertions(+), 35 deletions(-) diff --git a/docs/package.json b/docs/package.json index f4b5fc8469e..9a6f3043dab 100644 --- a/docs/package.json +++ b/docs/package.json @@ -47,7 +47,7 @@ "react-router": "^4.3.1", "react-stack-grid": "^0.7.1", "sitemap": "^2.1.0", - "snyk": "^1.104.0" + "snyk": "^1.108.0" }, "snyk": true } diff --git a/docs/yarn.lock b/docs/yarn.lock index 3ed75801871..bbc1e407beb 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -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== @@ -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== @@ -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== @@ -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" From cde95f3b5d8f557d2827f5fc4267a086ab07b24e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 7 Nov 2018 11:41:38 +0800 Subject: [PATCH 09/19] Add changelog entries missed due to squash merges --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c48131111ed..a6348a30ddd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 From a8497064cae71c7f1735325d8a2f5b40defc791b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o=20Lucas?= Date: Sun, 4 Nov 2018 21:59:09 -0500 Subject: [PATCH 10/19] feat: persist last displayed story Add supports for persistent selection with getStorybookUI's shouldPersistSelection param --- app/react-native/readme.md | 4 +++- app/react-native/src/preview/index.js | 25 ++++++++++++++++++++----- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/app/react-native/readme.md b/app/react-native/readme.md index 7a3f945cfcf..29cd57435c1 100644 --- a/app/react-native/readme.md +++ b/app/react-native/readme.md @@ -121,9 +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 + shouldPersistSelection: Boolean (true) + -- initialize storybook with the last selected story. } ``` ## Learn More -Check the `docs` directory in this repo for more advanced setup guides and other info. +Check the `docs` directory in this repo for more advanced setup guides and other info. \ No newline at end of file diff --git a/app/react-native/src/preview/index.js b/app/react-native/src/preview/index.js index b0bd0312117..db2dc9040e5 100644 --- a/app/react-native/src/preview/index.js +++ b/app/react-native/src/preview/index.js @@ -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 { 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(shouldPersistSelection); setInitialStory = true; }, @@ -133,8 +135,18 @@ export default class Preview { channel.emit(Events.GET_CURRENT_STORY); } - _setInitialStory = () => { - const story = this._getInitialStory(); + _setInitialStory = async (shouldPersistSelection = true) => { + let story = this._getInitialStory(); + + if (shouldPersistSelection) { + const value = await AsyncStorage.getItem(STORAGE_KEY); + const previousStory = JSON.parse(value); + + if (typeof previousStory === 'object' && previousStory.story) { + story = previousStory; + } + } + if (story) { this._selectStory(story); } @@ -142,6 +154,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 +171,8 @@ 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)); } } From 4808646ca151f3c33bad253caee3007d1148e2a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estev=C3=A3o=20Lucas?= Date: Tue, 6 Nov 2018 23:45:01 -0500 Subject: [PATCH 11/19] feat: add support for initialSelection param --- app/react-native/readme.md | 5 ++++- app/react-native/src/preview/index.js | 28 ++++++++++++++++++++++----- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/app/react-native/readme.md b/app/react-native/readme.md index 29cd57435c1..afbda79010e 100644 --- a/app/react-native/readme.md +++ b/app/react-native/readme.md @@ -121,8 +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. + -- initialize storybook with the last selected story.` + ) } ``` diff --git a/app/react-native/src/preview/index.js b/app/react-native/src/preview/index.js index db2dc9040e5..e01cb14b476 100644 --- a/app/react-native/src/preview/index.js +++ b/app/react-native/src/preview/index.js @@ -67,7 +67,7 @@ export default class Preview { const port = params.port !== false ? `:${params.port || 7007}` : ''; const query = params.query || ''; - const { secured, shouldPersistSelection } = params; + const { initialSelection, secured, shouldPersistSelection } = params; const websocketType = secured ? 'wss' : 'ws'; const httpType = secured ? 'https' : 'http'; @@ -77,7 +77,7 @@ export default class Preview { url, async: onDeviceUI, onError: () => { - this._setInitialStory(shouldPersistSelection); + this._setInitialStory(initialSelection, shouldPersistSelection); setInitialStory = true; }, @@ -135,14 +135,16 @@ export default class Preview { channel.emit(Events.GET_CURRENT_STORY); } - _setInitialStory = async (shouldPersistSelection = true) => { + _setInitialStory = async (initialSelection, shouldPersistSelection = true) => { let story = this._getInitialStory(); - if (shouldPersistSelection) { + if (initialSelection && this._checkStory(initialSelection)) { + story = initialSelection; + } else if (shouldPersistSelection) { const value = await AsyncStorage.getItem(STORAGE_KEY); const previousStory = JSON.parse(value); - if (typeof previousStory === 'object' && previousStory.story) { + if (this._checkStory(previousStory)) { story = previousStory; } } @@ -175,4 +177,20 @@ export default class Preview { 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; + } } From 51a62d12a91d2b22733cbacd8ed052706765abb1 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" Date: Wed, 7 Nov 2018 20:50:32 +0000 Subject: [PATCH 12/19] [Security] Bump cached-path-relative from 1.0.1 to 1.0.2 Bumps [cached-path-relative](https://github.com/ashaffer/cached-path-relative) from 1.0.1 to 1.0.2. **This update includes security fixes.** - [Release notes](https://github.com/ashaffer/cached-path-relative/releases) - [Changelog](https://github.com/ashaffer/cached-path-relative/blob/master/History.md) - [Commits](https://github.com/ashaffer/cached-path-relative/commits) Signed-off-by: dependabot[bot] --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index da3e0705f2f..6aeb50da705 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" From d496c9695c523e3255e5dc32f83b4cec50ce701e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 8 Nov 2018 14:57:54 +0100 Subject: [PATCH 13/19] FIX versions --- addons/ondevice-knobs/package.json | 2 +- addons/storyshots/storyshots-core/package.json | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json index c6ef78da0e6..4d2179ff6ee 100644 --- a/addons/ondevice-knobs/package.json +++ b/addons/ondevice-knobs/package.json @@ -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": "*" } diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index e876c39157c..3387213c256 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -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" diff --git a/package.json b/package.json index 88195006273..0ba2e0e4121 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "4.0.0", + "version": "4.1.0-alpha.1", "private": true, "repository": { "type": "git", From 65f5703b10e2d63704f6a5bf56bd72164e9ff7e2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 8 Nov 2018 15:33:44 +0100 Subject: [PATCH 14/19] CHANGE tests to not output webpack build progress --- .circleci/config.yml | 22 +++++++++---------- ...urceProjects_Storybook_NativeSmokeTests.kt | 2 +- ...OpenSourceProjects_Storybook_SmokeTests.kt | 4 ++-- app/react-native/readme.md | 2 +- lib/cli/test/run_tests.sh | 2 +- 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 95af3d26fe8..8cc1ca4a166 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -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: @@ -179,7 +179,7 @@ jobs: name: Run React-Native-App example command: | cd examples-native/crna-kitchen-sink - yarn storybook --smoke-test + yarn storybook --smoke-test --quiet docs: <<: *defaults steps: diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt index d1e3319c8d9..6c1719f737e 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt @@ -30,7 +30,7 @@ object OpenSourceProjects_Storybook_NativeSmokeTests : BuildType({ yarn yarn bootstrap --reactnativeapp cd examples-native/crna-kitchen-sink - yarn storybook --smoke-test + yarn storybook --smoke-test --quiet """.trimIndent() dockerImage = "node:%docker.node.version%" } diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_SmokeTests.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_SmokeTests.kt index bf5f2ebf439..377397880bc 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_SmokeTests.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_SmokeTests.kt @@ -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%" } diff --git a/app/react-native/readme.md b/app/react-native/readme.md index afbda79010e..cfc38cc38b4 100644 --- a/app/react-native/readme.md +++ b/app/react-native/readme.md @@ -131,4 +131,4 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi ## Learn More -Check the `docs` directory in this repo for more advanced setup guides and other info. \ No newline at end of file +Check the `docs` directory in this repo for more advanced setup guides and other info. diff --git a/lib/cli/test/run_tests.sh b/lib/cli/test/run_tests.sh index e303df18119..951b50c37f7 100755 --- a/lib/cli/test/run_tests.sh +++ b/lib/cli/test/run_tests.sh @@ -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 From 7c394cc7c3944b8141410896736d5c65df73d35c Mon Sep 17 00:00:00 2001 From: Andrew Jones Date: Thu, 8 Nov 2018 14:51:45 +0000 Subject: [PATCH 15/19] Add storysource to addon gallery --- docs/src/pages/addons/addon-gallery/index.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/src/pages/addons/addon-gallery/index.md b/docs/src/pages/addons/addon-gallery/index.md index f19110824dd..00d66bdf639 100644 --- a/docs/src/pages/addons/addon-gallery/index.md +++ b/docs/src/pages/addons/addon-gallery/index.md @@ -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. From 53dc825289d5f13fd317988658c15b41d5e38d63 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 8 Nov 2018 17:11:56 +0100 Subject: [PATCH 16/19] REMOVE quiet flag for tests for RN, (it's always silent) --- .circleci/config.yml | 2 +- .../buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 8cc1ca4a166..76cc6666676 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -179,7 +179,7 @@ jobs: name: Run React-Native-App example command: | cd examples-native/crna-kitchen-sink - yarn storybook --smoke-test --quiet + yarn storybook --smoke-test docs: <<: *defaults steps: diff --git a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt index 6c1719f737e..d1e3319c8d9 100644 --- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt +++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_NativeSmokeTests.kt @@ -30,7 +30,7 @@ object OpenSourceProjects_Storybook_NativeSmokeTests : BuildType({ yarn yarn bootstrap --reactnativeapp cd examples-native/crna-kitchen-sink - yarn storybook --smoke-test --quiet + yarn storybook --smoke-test """.trimIndent() dockerImage = "node:%docker.node.version%" } From 3d31fd33a40185cd3991cc9baff75a0914a071f2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 8 Nov 2018 17:47:20 +0100 Subject: [PATCH 17/19] CHANGE start command for RN to allow --quiet --- app/react-native/src/bin/storybook-start.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/react-native/src/bin/storybook-start.js b/app/react-native/src/bin/storybook-start.js index ebdae9425db..b049f2815d5 100644 --- a/app/react-native/src/bin/storybook-start.js +++ b/app/react-native/src/bin/storybook-start.js @@ -5,6 +5,7 @@ import program from 'commander'; import Server from '../server'; program + .allowUnknownOption() .option('-h, --host ', 'host to listen on', 'localhost') .option('-p, --port ', 'port to listen on', 7007) .option('-s, --secured', 'whether server is running on https') From a9e0c6cd3ec19f18eb9ccf3edcf191aa9e244c44 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 9 Nov 2018 09:58:06 +0100 Subject: [PATCH 18/19] FIX deprecation warning from husky --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 0ba2e0e4121..fd488106836 100644 --- a/package.json +++ b/package.json @@ -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" }, From 3c38a6d075c073a3975eb27d4ec27bd551aee152 Mon Sep 17 00:00:00 2001 From: Jamie Mason Date: Thu, 8 Nov 2018 17:42:53 +0000 Subject: [PATCH 19/19] Ensure @storybook/react can be imported in Node.js without errors --- app/react/src/client/preview/globals.js | 7 +++++-- app/react/src/client/preview/index.test.js | 24 ++++++++++++++++++++++ app/react/src/client/preview/render.js | 2 +- 3 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 app/react/src/client/preview/index.test.js diff --git a/app/react/src/client/preview/globals.js b/app/react/src/client/preview/globals.js index ac7fc8f90a6..1f7c80bda80 100644 --- a/app/react/src/client/preview/globals.js +++ b/app/react/src/client/preview/globals.js @@ -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'; +} diff --git a/app/react/src/client/preview/index.test.js b/app/react/src/client/preview/index.test.js new file mode 100644 index 00000000000..cba87bb5e2d --- /dev/null +++ b/app/react/src/client/preview/index.test.js @@ -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); + }); +}); diff --git a/app/react/src/client/preview/render.js b/app/react/src/client/preview/render.js index 507e5868563..7076832f0a4 100644 --- a/app/react/src/client/preview/render.js +++ b/app/react/src/client/preview/render.js @@ -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(