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

Merge remote-tracking branch 'origin/master' into improve-search-and-highlighting

Browse Source
This commit is contained in:
igor 2017-08-18 13:33:01 +03:00
commit 2c4bb77cee
86 changed files with 654 additions and 335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
.circleci/config.yml
View File

@ -48,13 +48,30 @@ jobs:
- docs/**/node_modules
- examples/**/node_modules
- lib/**/node_modules
example-kitchen-sink:
example-kitchen-sinks:
<<: *defaults
steps:
- checkout
- restore_cache:
keys:
- root-dependencies-{{ checksum "package.json" }}
- root-dependencies-
- run:
name: "Running kitchen-sink"
name: "Install root dependencies"
command: |
echo "TODO"
yarn install
- run:
name: "Bootstrapping"
command: |
npm run bootstrap
- run:
name: "Build react kitchen-sink"
command: |
cd examples/cra-kitchen-sink && npm run build-storybook
- run:
name: "Build vue kitchen-sink"
command: |
cd examples/vue-kitchen-sink && npm run build-storybook
example-test-cra:
<<: *defaults
steps:
@ -71,11 +88,12 @@ jobs:
name: "Bootstrapping"
command: |
npm run bootstrap
npm run build-packs
npm run bootstrap:test-cra
- run:
name: "Running test-cra"
name: "Build test-cra"
command: |
echo "TODO"
cd examples/test-cra && npm run build-storybook
example-react-native:
<<: *defaults
steps:
@ -92,12 +110,12 @@ jobs:
name: "Bootstrapping packages"
command: |
npm run bootstrap
npm run build-packs
npm run bootstrap:react-native-vanilla
- run:
name: "Running react-native"
command: |
echo "TODO"
docs:
<<: *defaults
steps:
@ -150,8 +168,7 @@ jobs:
name: "Bootstrapping"
command: |
npm run bootstrap
npm run bootstrap:docs
npm run bootstrap:test-cra
npm run build-packs
npm run bootstrap:react-native-vanilla
- run:
name: "Unit testing"
@ -171,15 +188,15 @@ workflows:
jobs:
- validate
- build
- example-kitchen-sink
- example-kitchen-sinks
- example-test-cra
- example-react-native
- docs
- lint
- unit-test
- deploy:
type: approval
requires:
- lint
- unit-test
- docs
# - deploy:
# type: approval
# requires:
# - lint
# - unit-test
# - docs

1
addons/info/package.json
View File

@ -15,6 +15,7 @@
},
"dependencies": {
"@storybook/addons": "^3.2.0",
"@storybook/components": "^3.2.0",
"babel-runtime": "^6.23.0",
"global": "^4.3.2",
"marksy": "^2.0.0",

2
addons/info/src/components/Story.js
View File

@ -3,12 +3,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import global from 'global';
import { baseFonts } from '@storybook/components';
import marksy from 'marksy';
import PropTable from './PropTable';
import Node from './Node';
import { baseFonts } from './theme';
import { Pre } from './markdown';
global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || [];

2
addons/info/src/components/markdown/htags.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { baseFonts } from '../theme';
import { baseFonts } from '@storybook/components';
const defaultProps = {
children: null,

2
addons/info/src/components/markdown/text.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { baseFonts } from '../theme';
import { baseFonts } from '@storybook/components';
const defaultProps = { children: null };
const propTypes = { children: PropTypes.node };

8
addons/info/src/components/theme.js
View File

@ -1,8 +0,0 @@
export const baseFonts = {
fontFamily: `
-apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",
"Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
`,
color: '#444',
WebkitFontSmoothing: 'antialiased',
};

2
addons/storyshots/package.json
View File

@ -25,7 +25,7 @@
"@storybook/react": "^3.2.5",
"babel-cli": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1"

2
app/react-native/.babelrc
View File

@ -1,3 +1,3 @@
{
"presets": ["es2015", "es2016", "stage-0", "react"]
"presets": ["env", "stage-0", "react"]
}

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

@ -40,8 +40,8 @@
"babel-plugin-transform-regenerator": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-env": "^1.6.0",
"babel-preset-minify": "^0.2.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-runtime": "^6.23.0",
@ -56,7 +56,8 @@
"json-loader": "^0.5.4",
"json5": "^0.5.1",
"postcss-loader": "^2.0.5",
"react-native-compat": "0.0.2",
"prop-types": "^15.5.10",
"react-native-compat": "^1.0.0",
"shelljs": "^0.7.8",
"style-loader": "^0.17.0",
"url-loader": "^0.5.8",

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

@ -41,17 +41,19 @@ server.listen(...listenAddr, err => {
});
if (!program.skipPackager) {
let symlinks = []
try{
let symlinks = [];
try {
const findSymlinksPaths = require('react-native/local-cli/util/findSymlinksPaths'); // eslint-disable-line global-require
symlinks = findSymlinksPaths(path.join(projectDir, 'node_modules'), [projectDir]);
}catch(e){
console.warn(`Unable to load findSymlinksPaths: ${e.message}`);
} catch (e) {
console.warn(`Unable to load findSymlinksPaths: ${e.message}`);
}
const projectRoots = (configDir === projectDir ? [configDir] : [configDir, projectDir]).concat(symlinks);
const projectRoots = (configDir === projectDir ? [configDir] : [configDir, projectDir]).concat(
symlinks
);
let cliCommand = 'node node_modules/react-native/local-cli/cli.js start';
if (program.haul) {
cliCommand = `node node_modules/.bin/haul start --config ${program.haul} --platform all`;

4
app/react-native/src/preview/components/OnDeviceUI/index.js vendored
View File

@ -1,4 +1,6 @@
import React, { Component, PropTypes } from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
Animated,
Easing,

3
app/react-native/src/preview/components/StoryListView/index.js vendored
View File

@ -1,4 +1,5 @@
import React, { Component, PropTypes } from 'react';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { ListView, View, Text, TouchableOpacity } from 'react-native';
import { MinMaxView } from 'react-native-compat';
import style from './style';

3
app/react-native/src/preview/components/StoryView/index.js vendored
View File

@ -1,4 +1,5 @@
import React, { Component, PropTypes } from 'react';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import style from './style';

25
app/react-native/src/server/config/babel.js vendored
View File

@ -1,33 +1,20 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
module.exports = {
// Don't try to find .babelrc because we want to force this configuration.
babelrc: false,
presets: [
// let, const, destructuring, classes, modules
require.resolve('babel-preset-es2015'),
// exponentiation
require.resolve('babel-preset-es2016'),
// JSX, Flow
[
require.resolve('babel-preset-env'),
{
modules: false,
},
],
require.resolve('babel-preset-react'),
],
plugins: [
// function x(a, b, c,) { }
require.resolve('babel-plugin-syntax-trailing-function-commas'),
// await fetch()
require.resolve('babel-plugin-syntax-async-functions'),
// class { handleClick = () => { } }
require.resolve('babel-plugin-transform-class-properties'),
// { ...todo, completed: true }
require.resolve('babel-plugin-transform-object-rest-spread'),
// function* () { yield 42; yield 43; }
require.resolve('babel-plugin-transform-regenerator'),
// Polyfills the runtime needed for async/await and generators
[

28
app/react-native/src/server/config/babel.prod.js
View File

@ -1,33 +1,21 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
module.exports = {
// Don't try to find .babelrc because we want to force this configuration.
babelrc: false,
presets: [
// let, const, destructuring, classes, modules
require.resolve('babel-preset-es2015'),
// exponentiation
require.resolve('babel-preset-es2016'),
// JSX, Flow
[
require.resolve('babel-preset-env'),
{
modules: false,
},
],
require.resolve('babel-preset-react'),
require.resolve('babel-preset-minify'),
],
plugins: [
// function x(a, b, c,) { }
require.resolve('babel-plugin-syntax-trailing-function-commas'),
// await fetch()
require.resolve('babel-plugin-syntax-async-functions'),
// class { handleClick = () => { } }
require.resolve('babel-plugin-transform-class-properties'),
// { ...todo, completed: true }
require.resolve('babel-plugin-transform-object-rest-spread'),
// function* () { yield 42; yield 43; }
require.resolve('babel-plugin-transform-regenerator'),
// Polyfills the runtime needed for async/await and generators
[
@ -38,7 +26,5 @@ module.exports = {
regenerator: true,
},
],
// Optimization: hoist JSX that never changes out of render()
require.resolve('babel-plugin-transform-react-constant-elements'),
],
};

2
app/react/.babelrc
View File

@ -1,3 +1,3 @@
{
"presets": ["es2015", "es2016", "stage-0", "react"]
"presets": ["env", "stage-0", "react"]
}

4
app/react/package.json
View File

@ -32,8 +32,8 @@
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-plugin-react-docgen": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-env": "^1.6.0",
"babel-preset-minify": "^0.2.0",
"babel-preset-react": "^6.24.1",
"babel-preset-react-app": "^3.0.0",
"babel-preset-stage-0": "^6.24.1",

6
app/react/src/server/babel_config.test.js
View File

@ -12,7 +12,7 @@ describe('babel_config', () => {
mock({
'.babelrc': `{
"presets": [
"es2015",
"env",
"foo-preset"
],
"plugins": [
@ -41,7 +41,7 @@ describe('babel_config', () => {
mock({
'.babelrc': `{
"presets": [
"es2015",
"env",
"foo-preset"
],
"plugins": "bar-plugin"
@ -68,7 +68,7 @@ describe('babel_config', () => {
mock({
'.babelrc': `{
"presets": [
"es2015",
"env",
"foo-preset"
]
}`,

32
app/react/src/server/config/babel.js
View File

@ -1,19 +1,31 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
const findCacheDir = require('find-cache-dir');
module.exports = {
// Don't try to find .babelrc because we want to force this configuration.
babelrc: false,
cacheDirectory: findCacheDir({ name: 'react-storybook' }),
presets: [
require.resolve('babel-preset-es2015'),
require.resolve('babel-preset-es2016'),
[
require.resolve('babel-preset-env'),
{
targets: {
browsers: ['last 2 versions', 'safari >= 7'],
},
modules: false,
},
],
require.resolve('babel-preset-stage-0'),
require.resolve('babel-preset-react'),
],
plugins: [
require.resolve('babel-plugin-transform-regenerator'),
[
require.resolve('babel-plugin-transform-runtime'),
{
helpers: true,
polyfill: true,
regenerator: true,
},
],
],
};

32
app/react/src/server/config/babel.prod.js
View File

@ -1,19 +1,29 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
module.exports = {
// Don't try to find .babelrc because we want to force this configuration.
babelrc: false,
presets: [
require.resolve('babel-preset-es2015'),
require.resolve('babel-preset-es2016'),
[
require.resolve('babel-preset-env'),
{
targets: {
browsers: ['last 2 versions', 'safari >= 7'],
},
modules: false,
},
],
require.resolve('babel-preset-stage-0'),
require.resolve('babel-preset-react'),
require.resolve('babel-preset-minify'),
],
plugins: [
require.resolve('babel-plugin-transform-regenerator'),
[
require.resolve('babel-plugin-transform-runtime'),
{
helpers: true,
polyfill: true,
regenerator: true,
},
],
],
};

1
app/vue/package.json
View File

@ -33,6 +33,7 @@
"babel-loader": "^7.0.0",
"babel-plugin-react-docgen": "^1.6.0",
"babel-preset-env": "^1.6.0",
"babel-preset-minify": "^0.2.0",
"babel-preset-react": "^6.24.1",
"babel-preset-react-app": "^3.0.0",
"babel-preset-stage-0": "^6.24.1",

6
app/vue/src/server/babel_config.test.js
View File

@ -12,7 +12,7 @@ describe('babel_config', () => {
mock({
'.babelrc': `{
"presets": [
"es2015",
"env",
"foo-preset"
],
"plugins": [
@ -41,7 +41,7 @@ describe('babel_config', () => {
mock({
'.babelrc': `{
"presets": [
"es2015",
"env",
"foo-preset"
],
"plugins": "bar-plugin"
@ -68,7 +68,7 @@ describe('babel_config', () => {
mock({
'.babelrc': `{
"presets": [
"es2015",
"env",
"foo-preset"
]
}`,

33
app/vue/src/server/config/babel.js
View File

@ -1,24 +1,31 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
const findCacheDir = require('find-cache-dir');
module.exports = {
// Don't try to find .babelrc because we want to force this configuration.
babelrc: false,
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables a cache directory for faster-rebuilds
// `find-cache-dir` will create the cache directory under the node_modules directory.
cacheDirectory: findCacheDir({ name: 'react-storybook' }),
presets: [
require.resolve('babel-preset-env'),
[
require.resolve('babel-preset-env'),
{
targets: {
browsers: ['last 2 versions', 'safari >= 7'],
},
modules: false,
},
],
require.resolve('babel-preset-stage-0'),
require.resolve('babel-preset-react'),
],
plugins: [
require.resolve('babel-plugin-transform-regenerator'),
[
require.resolve('babel-plugin-transform-runtime'),
{
helpers: true,
polyfill: true,
regenerator: true,
},
],
],
};

31
app/vue/src/server/config/babel.prod.js
View File

@ -1,18 +1,29 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
module.exports = {
// Don't try to find .babelrc because we want to force this configuration.
babelrc: false,
presets: [
require.resolve('babel-preset-env'),
[
require.resolve('babel-preset-env'),
{
targets: {
browsers: ['last 2 versions', 'safari >= 7'],
},
modules: false,
},
],
require.resolve('babel-preset-stage-0'),
require.resolve('babel-preset-react'),
require.resolve('babel-preset-minify'),
],
plugins: [
require.resolve('babel-plugin-transform-regenerator'),
[
require.resolve('babel-plugin-transform-runtime'),
{
helpers: true,
polyfill: true,
regenerator: true,
},
],
],
};

8
docs/components/Homepage/UsedBy/style.css
View File

@ -37,21 +37,21 @@
.used-by-users {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
.used-by-user {
/*flex: 1;*/
margin-right: 30px;
margin: 0 15px 30px;
max-width: 100px;
filter: grayscale(100%);
opacity: 0.8;
}
.used-by-user:last-child {
margin-right: 0;
transition: filter 0.3s ease-out, opacity 0.3s ease-out;
}
.used-by-user:hover {
transition: none;
filter: none;
opacity: 1;
}

3
examples/cra-kitchen-sink/.storybook/config.js
View File

@ -17,7 +17,8 @@ setOptions({
setAddon(infoAddon);
function loadStories() {
require('../src/stories');
require('../src/stories/index');
require('../src/stories/storybook-components');
}
configure(loadStories, module);

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

@ -12,6 +12,8 @@
"dependencies": {
"eventemitter3": "^2.0.3",
"format-json": "^1.0.3",
"glamor": "^2.20.40",
"glamorous": "^4.1.2",
"global": "^4.3.2",
"prop-types": "^15.5.10",
"react": "^15.6.1",
@ -19,17 +21,18 @@
"uuid": "^3.1.0"
},
"devDependencies": {
"@storybook/addon-actions": "3.2.0-alpha.10",
"@storybook/addon-centered": "3.2.0-alpha.8",
"@storybook/addon-events": "3.2.0-alpha.10",
"@storybook/addon-knobs": "3.2.0-alpha.10",
"@storybook/addon-info": "3.2.0-alpha.10",
"@storybook/addon-links": "3.2.0-alpha.10",
"@storybook/addon-notes": "3.2.0-alpha.10",
"@storybook/addon-options": "3.2.0-alpha.10",
"@storybook/addon-storyshots": "3.2.0-alpha.11",
"@storybook/addons": "3.2.0-alpha.10",
"@storybook/react": "3.2.0-alpha.11",
"@storybook/addon-actions": "^3.2.0",
"@storybook/addon-centered": "^3.2.0",
"@storybook/addon-events": "^3.2.0",
"@storybook/addon-knobs": "^3.2.0",
"@storybook/addon-info": "^3.2.0",
"@storybook/addon-links": "^3.2.0",
"@storybook/addon-notes": "^3.2.0",
"@storybook/addon-options": "^3.2.0",
"@storybook/addon-storyshots": "^3.2.0",
"@storybook/addons": "^3.2.0",
"@storybook/components": "^3.2.0",
"@storybook/react": "^3.2.0",
"react-scripts": "1.0.1"
},
"private": true

53
examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap
View File

@ -137,10 +137,7 @@ exports[`Storyshots Button addons composition 1`] = `
"borderRadius": "2px",
"boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
"color": "#444",
"fontFamily": "
-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
\\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
",
"fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
"fontSize": "15px",
"fontWeight": 300,
"lineHeight": 1.45,
@ -194,10 +191,7 @@ exports[`Storyshots Button addons composition 1`] = `
Object {
"WebkitFontSmoothing": "antialiased",
"color": "#444",
"fontFamily": "
-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
\\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
",
"fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
"fontSize": "15px",
}
}
@ -589,10 +583,7 @@ exports[`Storyshots Button with new info 1`] = `
"borderRadius": "2px",
"boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
"color": "#444",
"fontFamily": "
-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
\\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
",
"fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
"fontSize": "15px",
"fontWeight": 300,
"lineHeight": 1.45,
@ -646,10 +637,7 @@ exports[`Storyshots Button with new info 1`] = `
Object {
"WebkitFontSmoothing": "antialiased",
"color": "#444",
"fontFamily": "
-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
\\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
",
"fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
"fontSize": "15px",
}
}
@ -1165,10 +1153,7 @@ exports[`Storyshots Button with some info 1`] = `
"borderRadius": "2px",
"boxShadow": "0px 2px 3px rgba(0, 0, 0, 0.05)",
"color": "#444",
"fontFamily": "
-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
\\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
",
"fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
"fontSize": "15px",
"fontWeight": 300,
"lineHeight": 1.45,
@ -1222,10 +1207,7 @@ exports[`Storyshots Button with some info 1`] = `
Object {
"WebkitFontSmoothing": "antialiased",
"color": "#444",
"fontFamily": "
-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
\\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif
",
"fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
"fontSize": "15px",
}
}
@ -1669,6 +1651,29 @@ exports[`Storyshots Cells/Molecules/Atoms.more with text2 1`] = `
</button>
`;
exports[`Storyshots Navigation Menu link 1`] = `
<div
className="css-t9df35"
>
<a
className="css-1enjukp"
href="/"
onClick={[Function]}
>
Menu link item
</a>
</div>
`;
exports[`Storyshots Navigation Routed link 1`] = `
<a
href="/"
onClick={[Function]}
>
Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd)
</a>
`;
exports[`Storyshots Some really long story kind description with text 1`] = `
<div
style={

26
examples/cra-kitchen-sink/src/stories/storybook-components.js Normal file
View File

@ -0,0 +1,26 @@
import React from 'react';
import { css } from 'glamor';
import { Div } from 'glamorous';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
import { baseFonts, RoutedLink, MenuLink } from '@storybook/components';
css.global('body', baseFonts);
storiesOf('Navigation', module)
.add('Routed link', () =>
<RoutedLink href="/" onClick={action('navigation triggered')}>
Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd)
</RoutedLink>
)
.addDecorator(withKnobs)
.add('Menu link', () =>
<Div width={number('Container width', 90, { range: true, min: 50, max: 200, step: 10 })}>
<MenuLink href="/" onClick={action('navigation triggered')} active={boolean('Active', true)}>
{text('Text', 'Menu link item')}
</MenuLink>
</Div>
);

19
examples/crna-kitchen-sink/package.json
View File

@ -3,15 +3,16 @@
"version": "0.1.0",
"private": true,
"devDependencies": {
"@storybook/addon-actions": "file:../../addons/actions",
"@storybook/addon-links": "file:../../addons/links",
"@storybook/addon-options": "file:../../addons/options",
"@storybook/addon-storyshots": "file:../../addons/storyshots",
"@storybook/addons": "file:../../lib/addons",
"@storybook/channels": "file:../../lib/channels",
"@storybook/channel-postmessage": "file:../../lib/channel-postmessage",
"@storybook/react-native": "file:../../app/react-native",
"@storybook/ui": "file:../../lib/ui",
"@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
"@storybook/addon-links": "file:../../packs/storybook-addon-links.tgz",
"@storybook/addon-options": "file:../../packs/storybook-addon-options.tgz",
"@storybook/addon-storyshots": "file:../../packs/storybook-addon-storyshots.tgz",
"@storybook/addons": "file:../../packs/storybook-addons.tgz",
"@storybook/channels": "file:../../packs/storybook-channels.tgz",
"@storybook/channel-postmessage": "file:../../packs/storybook-channel-postmessage.tgz",
"@storybook/components": "file:../../packs/storybook-components.tgz",
"@storybook/react-native": "file:../../packs/storybook-react-native.tgz",
"@storybook/ui": "file:../../packs/storybook-ui.tgz",
"react-native-scripts": "1.1.0",
"jest-expo": "~19.0.0",
"react-test-renderer": "16.0.0-alpha.12"

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

@ -16,15 +16,16 @@
"babel-preset-react-native": "1.9.2",
"jest": "^20.0.4",
"react-test-renderer": "16.0.0-alpha.6",
"@storybook/addon-actions": "file:../../addons/actions",
"@storybook/addon-links": "file:../../addons/links",
"@storybook/addon-options": "file:../../addons/options",
"@storybook/addon-storyshots": "file:../../addons/storyshots",
"@storybook/addons": "file:../../lib/addons",
"@storybook/channels": "file:../../lib/channels",
"@storybook/channel-postmessage": "file:../../lib/channel-postmessage",
"@storybook/react-native": "file:../../app/react-native",
"@storybook/ui": "file:../../lib/ui",
"@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
"@storybook/addon-links": "file:../../packs/storybook-addon-links.tgz",
"@storybook/addon-options": "file:../../packs/storybook-addon-options.tgz",
"@storybook/addon-storyshots": "file:../../packs/storybook-addon-storyshots.tgz",
"@storybook/addons": "file:../../packs/storybook-addons.tgz",
"@storybook/channels": "file:../../packs/storybook-channels.tgz",
"@storybook/channel-postmessage": "file:../../packs/storybook-channel-postmessage.tgz",
"@storybook/components": "file:../../packs/storybook-components.tgz",
"@storybook/react-native": "file:../../packs/storybook-react-native.tgz",
"@storybook/ui": "file:../../packs/storybook-ui.tgz",
"react-dom": "^15.6.1"
}
}

4
examples/test-cra/.storybook/config.js
View File

@ -1,9 +1,7 @@
import { configure } from '@storybook/react';
import { setOptions } from '@storybook/addon-options';
setOptions({
sidebarAnimations: false,
});
setOptions({ sidebarAnimations: false, }),
function loadStories() {
require('../src/stories');

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

@ -19,9 +19,11 @@
"devDependencies": {
"@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
"@storybook/addon-links": "file:../../packs/storybook-addon-links.tgz",
"@storybook/addon-options": "file:../../packs/storybook-addon-options.tgz",
"@storybook/addons": "file:../../packs/storybook-addons.tgz",
"@storybook/channel-postmessage": "file:../../packs/storybook-channel-postmessage.tgz",
"@storybook/channels": "file:../../packs/storybook-channels.tgz",
"@storybook/components": "file:../../packs/storybook-components.tgz",
"@storybook/react": "file:../../packs/storybook-react.tgz",
"@storybook/ui": "file:../../packs/storybook-ui.tgz",
"react-scripts": "1.0.2",

12
examples/vue-kitchen-sink/package.json
View File

@ -3,12 +3,12 @@
"version": "0.1.0",
"private": true,
"devDependencies": {
"@storybook/vue": "3.2.0-alpha.11",
"@storybook/addon-actions": "3.2.0-alpha.10",
"@storybook/addon-links": "3.2.0-alpha.10",
"@storybook/addons": "3.2.0-alpha.10",
"@storybook/addon-notes": "3.2.0-alpha.10",
"@storybook/addon-knobs": "3.2.0-alpha.10",
"@storybook/vue": "^3.2.0",
"@storybook/addon-actions": "^3.2.0",
"@storybook/addon-links": "^3.2.0",
"@storybook/addons": "^3.2.0",
"@storybook/addon-notes": "^3.2.0",
"@storybook/addon-knobs": "^3.2.0",
"vue-hot-reload-api": "^2.1.0",
"vue-style-loader": "^3.0.1",
"vue-loader": "^12.2.1",

3
lerna.json
View File

@ -14,8 +14,7 @@
"crna-kitchen-sink",
"test-cra",
"react-native-vanilla",
"vue-example",
"@storybook/components"
"vue-example"
]
}
},

17
lib/cli/generators/METEOR/index.js
View File

@ -7,10 +7,11 @@ const latestVersion = require('latest-version');
module.exports = Promise.all([
latestVersion('@storybook/react'),
latestVersion('@storybook/addon-actions'),
latestVersion('@storybook/addon-links'),
latestVersion('react'),
latestVersion('react-dom'),
latestVersion('babel-preset-es2015'),
latestVersion('babel-preset-es2016'),
latestVersion('babel-preset-env'),
latestVersion('babel-preset-react'),
latestVersion('babel-preset-stage-1'),
latestVersion('babel-root-slash-import'),
@ -18,10 +19,11 @@ module.exports = Promise.all([
(
[
storybookVersion,
actionsVersion,
linksVersion,
reactVersion,
reactDomVersion,
presetEs2015Version,
presetEs2016Version,
presetEnvVersion,
presetReactVersion,
presetStage1Version,
rootSlashImportVersion,
@ -47,12 +49,11 @@ module.exports = Promise.all([
}
} else {
babelrc = {
presets: ['es2015', 'es2016', 'react', 'stage-1'],
presets: ['env', 'react', 'stage-1'],
plugins: ['babel-root-slash-import'],
};
packageJson.devDependencies['babel-preset-es2015'] = `^${presetEs2015Version}`;
packageJson.devDependencies['babel-preset-es2016'] = `^${presetEs2016Version}`;
packageJson.devDependencies['babel-preset-env'] = `^${presetEnvVersion}`;
packageJson.devDependencies['babel-preset-react'] = `^${presetReactVersion}`;
packageJson.devDependencies['babel-preset-stage-1'] = `^${presetStage1Version}`;
packageJson.devDependencies['babel-root-slash-import'] = `^${rootSlashImportVersion}`;
@ -62,6 +63,8 @@ module.exports = Promise.all([
// write the new package.json.
packageJson.devDependencies['@storybook/react'] = `^${storybookVersion}`;
packageJson.devDependencies['@storybook/addon-actions'] = `^${actionsVersion}`;
packageJson.devDependencies['@storybook/addon-links'] = `^${linksVersion}`;
packageJson.scripts.storybook = 'start-storybook -p 6006';
packageJson.scripts['build-storybook'] = 'build-storybook';

2
lib/cli/generators/METEOR/template/.stories/index.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import React from 'react';

2
lib/cli/generators/METEOR/template/.storybook/addons.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';

2
lib/cli/generators/METEOR/template/.storybook/config.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import { configure } from '@storybook/react';

10
lib/cli/generators/REACT/index.js
View File

@ -3,13 +3,19 @@ const helpers = require('../../lib/helpers');
const path = require('path');
const latestVersion = require('latest-version');
module.exports = latestVersion('@storybook/react').then(version => {
module.exports = Promise.all([
latestVersion('@storybook/react'),
latestVersion('@storybook/addon-actions'),
latestVersion('@storybook/addon-links'),
]).then(([storybookVersion, actionsVersion, linksVersion]) => {
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
const packageJson = helpers.getPackageJson();
packageJson.devDependencies = packageJson.devDependencies || {};
packageJson.devDependencies['@storybook/react'] = `^${version}`;
packageJson.devDependencies['@storybook/react'] = `^${storybookVersion}`;
packageJson.devDependencies['@storybook/addon-actions'] = `^${actionsVersion}`;
packageJson.devDependencies['@storybook/addon-links'] = `^${linksVersion}`;
packageJson.scripts = packageJson.scripts || {};
packageJson.scripts.storybook = 'start-storybook -p 6006';

2
lib/cli/generators/REACT/template/.storybook/addons.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';

2
lib/cli/generators/REACT/template/.storybook/config.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import { configure } from '@storybook/react';

10
lib/cli/generators/REACT_NATIVE/index.js
View File

@ -5,7 +5,11 @@ const latestVersion = require('latest-version');
const chalk = require('chalk');
const helpers = require('../../lib/helpers');
module.exports = latestVersion('@storybook/react-native').then(version => {
module.exports = Promise.all([
latestVersion('@storybook/react'),
latestVersion('@storybook/addon-actions'),
latestVersion('@storybook/addon-links'),
]).then(([storybookVersion, actionsVersion, linksVersion]) => {
// copy all files from the template directory to project directory
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
@ -28,7 +32,9 @@ module.exports = latestVersion('@storybook/react-native').then(version => {
packageJson.dependencies = packageJson.dependencies || {};
packageJson.devDependencies = packageJson.devDependencies || {};
packageJson.devDependencies['@storybook/react-native'] = `^${version}`;
packageJson.devDependencies['@storybook/react'] = `^${storybookVersion}`;
packageJson.devDependencies['@storybook/addon-actions'] = `^${actionsVersion}`;
packageJson.devDependencies['@storybook/addon-links'] = `^${linksVersion}`;
if (!packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']) {
const reactVersion = packageJson.dependencies.react;

2
lib/cli/generators/REACT_NATIVE/template/storybook/addons.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';

2
lib/cli/generators/REACT_NATIVE/template/storybook/stories/Button/index.android.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import React, { PropTypes } from 'react';
import { TouchableNativeFeedback } from 'react-native';

2
lib/cli/generators/REACT_NATIVE/template/storybook/stories/Button/index.ios.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import React, { PropTypes } from 'react';
import { TouchableHighlight } from 'react-native';

2
lib/cli/generators/REACT_NATIVE/template/storybook/stories/CenterView/index.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import React, { PropTypes } from 'react';
import { View } from 'react-native';

2
lib/cli/generators/REACT_NATIVE/template/storybook/stories/Welcome/index.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import React, { PropTypes } from 'react';
import { View, Text } from 'react-native';

2
lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import React from 'react';
import { Text } from 'react-native';

2
lib/cli/generators/REACT_NATIVE/template/storybook/storybook.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions, global-require */
/* eslint-disable import/extensions, global-require */
import { AppRegistry } from 'react-native';
import { getStorybookUI, configure } from '@storybook/react-native';

10
lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js
View File

@ -3,7 +3,11 @@ const helpers = require('../../lib/helpers');
const path = require('path');
const latestVersion = require('latest-version');
module.exports = latestVersion('@storybook/react-native').then(version => {
module.exports = Promise.all([
latestVersion('@storybook/react'),
latestVersion('@storybook/addon-actions'),
latestVersion('@storybook/addon-links'),
]).then(([storybookVersion, actionsVersion, linksVersion]) => {
// copy all files from the template directory to project directory
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
@ -12,7 +16,9 @@ module.exports = latestVersion('@storybook/react-native').then(version => {
packageJson.dependencies = packageJson.dependencies || {};
packageJson.devDependencies = packageJson.devDependencies || {};
packageJson.devDependencies['@storybook/react-native'] = `^${version}`;
packageJson.devDependencies['@storybook/react'] = `^${storybookVersion}`;
packageJson.devDependencies['@storybook/addon-actions'] = `^${actionsVersion}`;
packageJson.devDependencies['@storybook/addon-links'] = `^${linksVersion}`;
if (!packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']) {
const reactVersion = packageJson.dependencies.react;

10
lib/cli/generators/REACT_SCRIPTS/index.js
View File

@ -4,12 +4,18 @@ const path = require('path');
const fs = require('fs');
const latestVersion = require('latest-version');
module.exports = latestVersion('@storybook/react').then(version => {
module.exports = Promise.all([
latestVersion('@storybook/react'),
latestVersion('@storybook/addon-actions'),
latestVersion('@storybook/addon-links'),
]).then(([storybookVersion, actionsVersion, linksVersion]) => {
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
const packageJson = helpers.getPackageJson();
packageJson.devDependencies['@storybook/react'] = `^${version}`;
packageJson.devDependencies['@storybook/react'] = `^${storybookVersion}`;
packageJson.devDependencies['@storybook/addon-actions'] = `^${actionsVersion}`;
packageJson.devDependencies['@storybook/addon-links'] = `^${linksVersion}`;
packageJson.scripts.storybook = 'start-storybook -p 9009';
packageJson.scripts['build-storybook'] = 'build-storybook';

2
lib/cli/generators/REACT_SCRIPTS/template/.storybook/addons.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';

2
lib/cli/generators/REACT_SCRIPTS/template/.storybook/config.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import { configure } from '@storybook/react';

10
lib/cli/generators/SFC_VUE/index.js
View File

@ -3,13 +3,19 @@ const helpers = require('../../lib/helpers');
const path = require('path');
const latestVersion = require('latest-version');
module.exports = latestVersion('@storybook/vue').then(version => {
module.exports = Promise.all([
latestVersion('@storybook/vue'),
latestVersion('@storybook/addon-actions'),
latestVersion('@storybook/addon-links'),
]).then(([storybookVersion, actionsVersion, linksVersion]) => {
mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
const packageJson = helpers.getPackageJson();
packageJson.devDependencies = packageJson.devDependencies || {};
packageJson.devDependencies['@storybook/vue'] = `^${version}`;
packageJson.devDependencies['@storybook/vue'] = `^${storybookVersion}`;
packageJson.devDependencies['@storybook/addon-actions'] = `^${actionsVersion}`;
packageJson.devDependencies['@storybook/addon-links'] = `^${linksVersion}`;
packageJson.scripts = packageJson.scripts || {};
packageJson.scripts.storybook = 'start-storybook -p 6006';

2
lib/cli/generators/SFC_VUE/template/.storybook/addons.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import '@storybook/addon-actions/register'
import '@storybook/addon-links/register'

2
lib/cli/generators/SFC_VUE/template/src/stories/index.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import { storiesOf } from '@storybook/vue';
import { action } from '@storybook/addon-actions';

10
lib/cli/generators/VUE/index.js
View File

@ -3,13 +3,19 @@ const helpers = require('../../lib/helpers');
const path = require('path');
const latestVersion = require('latest-version');
module.exports = latestVersion('@storybook/vue').then(version => {
Promise.all([
latestVersion('@storybook/vue'),
latestVersion('@storybook/addon-actions'),
latestVersion('@storybook/addon-links'),
]).then(([storybookVersion, actionsVersion, linksVersion]) => {
mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
const packageJson = helpers.getPackageJson();
packageJson.devDependencies = packageJson.devDependencies || {};
packageJson.devDependencies['@storybook/vue'] = `^${version}`;
packageJson.devDependencies['@storybook/vue'] = `^${storybookVersion}`;
packageJson.devDependencies['@storybook/addon-actions'] = `^${actionsVersion}`;
packageJson.devDependencies['@storybook/addon-links'] = `^${linksVersion}`;
packageJson.scripts = packageJson.scripts || {};
packageJson.scripts.storybook = 'start-storybook -p 6006';

2
lib/cli/generators/VUE/template/.storybook/addons.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import '@storybook/addon-actions/register'
import '@storybook/addon-links/register'

2
lib/cli/generators/VUE/template/.storybook/config.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
/* eslint-disable import/extensions */
import { configure } from '@storybook/vue'

2
lib/cli/generators/VUE/template/stories/MyButton.js
View File

@ -1,5 +1,3 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
export default {
name: 'my-button',

2
lib/cli/generators/VUE/template/stories/Welcome.js
View File

@ -1,5 +1,3 @@
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
const log = () => console.log('Welcome to storybook!')
export default {

10
lib/cli/generators/WEBPACK_REACT/index.js
View File

@ -3,13 +3,19 @@ const helpers = require('../../lib/helpers');
const path = require('path');
const latestVersion = require('latest-version');
module.exports = latestVersion('@storybook/react').then(version => {
Promise.all([
latestVersion('@storybook/react'),
latestVersion('@storybook/addon-actions'),
latestVersion('@storybook/addon-links'),
]).then(([storybookVersion, actionsVersion, linksVersion]) => {
mergeDirs(path.resolve(__dirname, 'template/'), '.', 'overwrite');
const packageJson = helpers.getPackageJson();
packageJson.devDependencies = packageJson.devDependencies || {};
packageJson.devDependencies['@storybook/react'] = `^${version}`;
packageJson.devDependencies['@storybook/react'] = `^${storybookVersion}`;
packageJson.devDependencies['@storybook/addon-actions'] = `^${actionsVersion}`;
packageJson.devDependencies['@storybook/addon-links'] = `^${linksVersion}`;
packageJson.scripts = packageJson.scripts || {};
packageJson.scripts.storybook = 'start-storybook -p 6006';

4
lib/codemod/src/index.js
View File

@ -5,6 +5,4 @@ export {
packageNames,
} from './transforms/update-organisation-name';
export {
default as updateAddonInfo
} from './transforms/update-addon-info';
export { default as updateAddonInfo } from './transforms/update-addon-info';

7
lib/codemod/src/transforms/__tests__/update-addon-info.test.js
View File

@ -1,8 +1,3 @@
import { defineTest } from 'jscodeshift/dist/testUtils';
defineTest(
__dirname,
'update-addon-info',
null,
'update-addon-info/update-addon-info'
);
defineTest(__dirname, 'update-addon-info', null, 'update-addon-info/update-addon-info');

37
lib/codemod/src/transforms/update-addon-info.js
View File

@ -22,7 +22,7 @@
* <Button label="The Button" />
* )))
*/
export default function transformer (file, api) {
export default function transformer(file, api) {
const j = api.jscodeshift;
const root = j(file.source);
@ -41,8 +41,8 @@ export default function transformer (file, api) {
return [
j.objectExpression([
j.property('init', j.identifier('text'), args[1]),
...args[3].properties
])
...args[3].properties,
]),
];
};
@ -59,13 +59,7 @@ export default function transformer (file, api) {
node.callee.property.name = 'add';
node.arguments = [
args[0],
j.callExpression(
j.callExpression(
j.identifier('withInfo'),
getOptions(args)
),
[args[2]]
)
j.callExpression(j.callExpression(j.identifier('withInfo'), getOptions(args)), [args[2]]),
];
return node;
@ -76,13 +70,15 @@ export default function transformer (file, api) {
* Adds the import if necessary.
*/
const checkWithInfoImport = () => {
const importExists = root.find(j.ImportDeclaration)
const importExists = root
.find(j.ImportDeclaration)
.filter(imp => imp.node.source.value === '@storybook/addon-info')
.size();
if (importExists) return;
root.find(j.ImportDeclaration)
root
.find(j.ImportDeclaration)
.at(-1)
.insertAfter(
j.importDeclaration(
@ -92,16 +88,13 @@ export default function transformer (file, api) {
);
};
const addWithInfoExpressions = root.find(
j.CallExpression,
{
callee: {
property: {
name: 'addWithInfo'
}
}
}
);
const addWithInfoExpressions = root.find(j.CallExpression, {
callee: {
property: {
name: 'addWithInfo',
},
},
});
if (addWithInfoExpressions.size()) {
checkWithInfoImport();

10
lib/components/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@storybook/components",
"version": "3.1.3",
"version": "3.2.4",
"description": "Core Storybook Components",
"license": "MIT",
"main": "dist/index.js",
@ -9,11 +9,13 @@
"url": "https://github.com/storybooks/storybook.git"
},
"scripts": {
"prepublish": "node ../../scripts/prepublish.js"
"prepublish": "node ../../scripts/prepublish.js",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"glamor": "^2.20.25",
"glamorous": "^3.22.1",
"glamor": "^2.20.40",
"glamorous": "^4.1.2",
"prop-types": "^15.5.10"
},
"devDependencies": {

5
lib/components/src/index.js
View File

@ -1 +1,4 @@
// empty for now
export { baseFonts } from './theme';
export { default as RoutedLink } from './navigation/routed_link';
export { default as MenuLink } from './navigation/menu_link';

28
lib/components/src/navigation/__snapshots__/routed_link.test.js.snap Normal file
View File

@ -0,0 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`manager.ui.components.routed_link render should not render onClick when not provided 1`] = `
<a
href="href"
>
Content
</a>
`;
exports[`manager.ui.components.routed_link render should render other properties 1`] = `
<a
href="href"
target="_blank"
title="title"
>
Other content
</a>
`;
exports[`manager.ui.components.routed_link render should render with onClick when provided 1`] = `
<a
href="#"
onClick={[Function]}
>
Content
</a>
`;

23
lib/components/src/navigation/menu_link.js Normal file
View File

@ -0,0 +1,23 @@
import glamorous from 'glamorous';
import RoutedLink from './routed_link';
export default glamorous(RoutedLink, { rootEl: 'a' })(
{
display: 'block',
color: '#828282',
textDecoration: 'none',
fontSize: '13px',
lineHeight: '16px',
padding: '1px 5px 4px',
marginLeft: '5px',
position: 'relative',
zIndex: 1,
},
({ active }) =>
active && {
color: 'inherit',
fontWeight: 'bold',
backgroundColor: '#EEE',
zIndex: 0,
}
);

45
lib/components/src/navigation/routed_link.js Normal file
View File

@ -0,0 +1,45 @@
import PropTypes from 'prop-types';
import React from 'react';
const LEFT_BUTTON = 0;
// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
const isPlainLeftClick = e =>
e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
const wrapOnClick = fn => e => (isPlainLeftClick(e) ? e.preventDefault() || fn(e) : false);
export default class RoutedLink extends React.Component {
constructor(props, ...rest) {
super(...[props, ...rest]);
const { onClick } = props;
this.onClick = onClick ? wrapOnClick(onClick) : undefined;
}
componentWillUpdate({ onClick }) {
this.onClick = wrapOnClick(onClick);
}
render() {
const { onClick } = this;
const { href, children, ...rest } = this.props;
const props = { href, ...rest, onClick };
return (
<a {...props}>
{children}
</a>
);
}
}
RoutedLink.defaultProps = {
onClick: null,
href: '#',
children: null,
};
RoutedLink.propTypes = {
onClick: PropTypes.func,
href: PropTypes.string,
children: PropTypes.node,
};

140
lib/components/src/navigation/routed_link.test.js Normal file
View File

@ -0,0 +1,140 @@
import { shallow } from 'enzyme';
import React from 'react';
import RoutedLink from './routed_link';
const LEFT_BUTTON = 0;
const MIDDLE_BUTTON = 1;
const RIGHT_BUTTON = 2;
const createEvent = options => ({
button: LEFT_BUTTON,
preventDefault: jest.fn(),
...options,
});
const render = props => shallow(<RoutedLink {...{ children: 'Content', ...props }} />);
const setup = ({ props, event }) => ({
e: createEvent(event),
result: render(props),
onClick: props.onClick || jest.fn(),
});
describe('manager.ui.components.routed_link', () => {
describe('render', () => {
test('should render with onClick when provided', () => {
const { result } = setup({ props: { onClick: jest.fn() } });
expect(result).toMatchSnapshot();
});
test('should not render onClick when not provided', () => {
const { result } = setup({
props: {
href: 'href',
children: 'Content',
},
});
expect(result).toMatchSnapshot();
});
test('should render other properties', () => {
const { result } = setup({
props: {
href: 'href',
title: 'title',
target: '_blank',
children: 'Other content',
},
});
expect(result).toMatchSnapshot();
});
});
describe('events', () => {
test('should call onClick on a plain left click', () => {
const { result, onClick, e } = setup({
props: { onClick: jest.fn() },
event: { button: LEFT_BUTTON },
});
result.simulate('click', e);
expect(onClick).toHaveBeenCalledWith(e);
expect(e.preventDefault).toHaveBeenCalled();
});
test("shouldn't call onClick on a middle click", () => {
const { result, onClick, e } = setup({
props: { onClick: jest.fn() },
event: { button: MIDDLE_BUTTON },
});
result.simulate('click', e);
expect(onClick).not.toHaveBeenCalled();
expect(e.preventDefault).not.toHaveBeenCalled();
});
test("shouldn't call onClick on a right click", () => {
const { result, onClick, e } = setup({
props: { onClick: jest.fn() },
event: { button: RIGHT_BUTTON },
});
result.simulate('click', e);
expect(onClick).not.toHaveBeenCalled();
expect(e.preventDefault).not.toHaveBeenCalled();
});
test("shouldn't call onClick on alt+click", () => {
const { result, onClick, e } = setup({
props: { onClick: jest.fn() },
event: { altKey: true },
});
result.simulate('click', e);
expect(onClick).not.toHaveBeenCalled();
expect(e.preventDefault).not.toHaveBeenCalled();
});
test("shouldn't call onClick on ctrl+click", () => {
const { result, onClick, e } = setup({
props: { onClick: jest.fn() },
event: { ctrlKey: true },
});
result.simulate('click', e);
expect(onClick).not.toHaveBeenCalled();
expect(e.preventDefault).not.toHaveBeenCalled();
});
test("shouldn't call onClick on cmd+click / win+click", () => {
const { result, onClick, e } = setup({
props: { onClick: jest.fn() },
event: { metaKey: true },
});
result.simulate('click', e);
expect(onClick).not.toHaveBeenCalled();
expect(e.preventDefault).not.toHaveBeenCalled();
});
test("shouldn't call onClick on shift+click", () => {
const { result, onClick, e } = setup({
props: { onClick: jest.fn() },
event: { shiftKey: true },
});
result.simulate('click', e);
expect(onClick).not.toHaveBeenCalled();
expect(e.preventDefault).not.toHaveBeenCalled();
});
});
});

6
lib/components/src/theme.js Normal file
View File

@ -0,0 +1,6 @@
export const baseFonts = {
fontFamily:
'-apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Lucida Grande", "Arial", sans-serif',
color: '#444',
WebkitFontSmoothing: 'antialiased',
};

2
lib/ui/example/package.json
View File

@ -9,7 +9,7 @@
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.2",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"eslint": "^3.19.0",

2
lib/ui/example/webpack.config.js
View File

@ -18,7 +18,7 @@ module.exports = {
{
test: /\.js$/,
loader: require.resolve('babel-loader'),
query: { presets: ['react', 'es2015', 'stage-0'] },
query: { presets: ['react', 'env', 'stage-0'] },
include: [path.join(__dirname, 'client'), path.resolve(__dirname, '../src')],
},
],

1
lib/ui/package.json
View File

@ -15,6 +15,7 @@
},
"dependencies": {
"@storybook/react-fuzzy": "^0.4.0",
"@storybook/components": "^3.2.4",
"babel-runtime": "^6.23.0",
"deep-equal": "^1.0.1",
"events": "^1.1.1",

2
lib/ui/src/modules/ui/components/down_panel/style.js
View File

@ -1,4 +1,4 @@
import { baseFonts } from '../theme';
import { baseFonts } from '@storybook/components';
export default {
empty: {

2
lib/ui/src/modules/ui/components/layout/dimensions.js
View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import React from 'react';
import { baseFonts } from '../theme';
import { baseFonts } from '@storybook/components';
const container = {
position: 'absolute',

2
lib/ui/src/modules/ui/components/left_panel/header.js
View File

@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import React from 'react';
import { baseFonts } from '../theme';
import { baseFonts } from '@storybook/components';
const wrapperStyle = {
background: '#F7F7F7',

21
lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_decorators.js
View File

@ -2,7 +2,7 @@ import { decorators } from 'react-treebeard';
import IoChevronRight from 'react-icons/lib/io/chevron-right';
import React from 'react';
import PropTypes from 'prop-types';
import RoutedLink from '../../../containers/routed_link';
import { MenuLink } from '../../../containers/routed_link';
import MenuItem from '../../menu_item';
import treeNodeTypes from './tree_node_type';
import { highlightNode } from './tree_decorators_utils';
@ -37,7 +37,7 @@ function ContainerDecorator(props) {
return null;
}
let containerStyle = container.reduce((acc, styles) => ({ ...acc, ...styles }), {});
const containerStyle = container.reduce((acc, styles) => ({ ...acc, ...styles }), {});
const innerContainer = <decorators.Container {...props} style={restStyles} onClick={noop} />;
if (node.type !== treeNodeTypes.STORY) {
@ -53,20 +53,15 @@ function ContainerDecorator(props) {
selectedStory: node.story,
};
containerStyle = {
...style.nativeLink,
...containerStyle,
};
return (
<RoutedLink
<MenuLink
active={node.active}
overrideParams={overrideParams}
style={containerStyle}
onClick={onClick}
data-name={node.name}
>
{innerContainer}
</RoutedLink>
</MenuLink>
);
}
@ -81,6 +76,7 @@ ContainerDecorator.propTypes = {
name: PropTypes.string.isRequired,
kind: PropTypes.string,
story: PropTypes.string,
active: PropTypes.bool,
}).isRequired,
onClick: PropTypes.func.isRequired,
};
@ -93,10 +89,7 @@ function HeaderDecorator(props) {
if (node.type === treeNodeTypes.STORY) {
newStyle = {
...style,
title: {
...style.title,
...style.storyTitle,
},
title: null,
};
}

18
lib/ui/src/modules/ui/components/left_panel/stories_tree/tree_style.js
View File

@ -1,4 +1,4 @@
import { baseFonts } from '../../theme';
import { baseFonts } from '@storybook/components';
const toggleWidth = '24px';
@ -25,17 +25,6 @@ export default {
display: 'block',
zIndex: 1,
},
activeLink: {
color: 'inherit',
fontWeight: 'bold',
backgroundColor: '#EEE',
zIndex: 0,
},
nativeLink: {
marginLeft: '5px',
color: '#828282',
textDecoration: 'none',
},
toggle: {
base: {
position: 'relative',
@ -78,11 +67,6 @@ export default {
lineHeight: '18px',
padding: '1px 0 5px',
},
storyTitle: {
fontSize: '13px',
lineHeight: '16px',
padding: '1px 0 4px',
},
highLightText: {
backgroundColor: '#FFFEAA',
fontWeight: 'inherit',

2
lib/ui/src/modules/ui/components/left_panel/text_filter.js
View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import React from 'react';
import debounce from 'lodash.debounce';
import { baseFonts } from '../theme';
import { baseFonts } from '@storybook/components';
const mainStyle = {
...baseFonts,

2
lib/ui/src/modules/ui/components/search_box.js
View File

@ -4,7 +4,7 @@ import React from 'react';
import ReactModal from 'react-modal';
import FuzzySearch from '@storybook/react-fuzzy';
import { baseFonts } from './theme';
import { baseFonts } from '@storybook/components';
const modalStyle = {
content: {

7
lib/ui/src/modules/ui/components/theme.js
View File

@ -1,7 +0,0 @@
export const baseFonts = {
fontFamily: `
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Arial", sans-serif
`,
color: '#444',
};

11
lib/ui/src/modules/ui/containers/routed_link.js
View File

@ -1,4 +1,5 @@
import RoutedLink from '../components/routed_link';
import { RoutedLink, MenuLink } from '@storybook/components';
import genPoddaLoader from '../libs/gen_podda_loader';
import { getUrlState } from '../configs/handle_routing';
import compose from '../../../compose';
@ -11,4 +12,10 @@ export function mapper(state, props) {
};
}
export default compose(genPoddaLoader(mapper))(RoutedLink);
const composer = compose(genPoddaLoader(mapper));
const ComposedMenuLink = composer(MenuLink);
export { ComposedMenuLink as MenuLink };
const ComposedRoutedLink = composer(RoutedLink);
export { ComposedRoutedLink as RoutedLink };

12
package.json
View File

@ -8,9 +8,9 @@
"scripts": {
"bootstrap": "lerna bootstrap --concurrency 1 --npm-client=\"yarn\" --hoist && node ./scripts/hoist-internals.js",
"bootstrap:docs": "cd docs && yarn install",
"bootstrap:react-native-vanilla": "lerna exec --scope react-native-vanilla -- yarn install",
"bootstrap:crna-kitchen-sink": "lerna exec --scope crna-kitchen-sink -- yarn install",
"bootstrap:test-cra": "npm run build-packs && lerna exec --scope test-cra -- yarn install",
"bootstrap:react-native-vanilla": "lerna exec --scope react-native-vanilla -- npm install",
"bootstrap:crna-kitchen-sink": "lerna exec --scope crna-kitchen-sink -- npm install",
"bootstrap:test-cra": "lerna exec --scope test-cra -- npm install",
"build-packs": "lerna exec --scope '@storybook/*' --parallel -- ../../scripts/build-pack.sh ../../packs",
"start": "lerna run --stream --scope cra-kitchen-sink storybook",
"changelog": "pr-log --sloppy",
@ -24,9 +24,9 @@
"docs:dev": "cd docs && npm run dev",
"github-release": "github-release-from-changelog",
"import-repo": "lerna import",
"lint": "npm run lint:js && npm run lint:md",
"lint:js": "eslint . --cache --cache-location=.cache/eslint --ext .js,.jsx,.json",
"lint:md": "remark .",
"lint": "npm run lint:js . && npm run lint:md .",
"lint:js": "eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json",
"lint:md": "remark",
"publish": "lerna publish",
"test": "jest --projects ./ ./examples/react-native-vanilla"
},