Merge branch 'master' into dependabot/npm_and_yarn/ember-cli-babel-7.1.2

CHANGELOG.md

@@ -1,3 +1,54 @@
+# 4.0.0-alpha.25
+
+2018-October-13
+
+#### Breaking Changes
+
+- CLI: Rename CLI to sb [#4345](https://github.com/storybooks/storybook/pull/4345)
+- React Native: Remove the packager from storybook [#4261](https://github.com/storybooks/storybook/pull/4261)
+
+#### Features
+
+- CLI: specify project type interactively or as option [#4184](https://github.com/storybooks/storybook/pull/4184)
+- Addon-Jest: expand supported file types [#3983](https://github.com/storybooks/storybook/pull/3983)
+- CLI-less Node api [#4344](https://github.com/storybooks/storybook/pull/4344)
+- React-Native: [onDeviceUI] Updated channel to support async option [#4326](https://github.com/storybooks/storybook/pull/4326)
+- Angular: Add support for "baseUrl" and "paths" from angular-cli [#4162](https://github.com/storybooks/storybook/pull/4162)
+- Angular: Added basePath support [#4323](https://github.com/storybooks/storybook/pull/4323)
+- Vue: support string-only component [#4285](https://github.com/storybooks/storybook/pull/4285)
+- Storyshots: Add snapshot serializer option [#4283](https://github.com/storybooks/storybook/pull/4283)
+- Storyshots: Support story-specific options as function [#4282](https://github.com/storybooks/storybook/pull/4282)
+
+#### Bug Fixes
+
+- [logging] better error logging for when opn fails to opn [#4348](https://github.com/storybooks/storybook/pull/4348)
+- Fix iPhone viewport dimensions [#4293](https://github.com/storybooks/storybook/pull/4293)
+- Fix Array.js value to string [#4336](https://github.com/storybooks/storybook/pull/4336)
+- Fixes to cli ember support [#4318](https://github.com/storybooks/storybook/pull/4318)
+- Update `addon-jest` to new propType [#4252](https://github.com/storybooks/storybook/pull/4252)
+
+#### Maintenance
+
+- Remove CRNA fixture [#4346](https://github.com/storybooks/storybook/pull/4346)
+- Try to fix cli tests [#4338](https://github.com/storybooks/storybook/pull/4338)
+- Updated installation for Angular [#4302](https://github.com/storybooks/storybook/pull/4302)
+- Fix the broken lint [#4310](https://github.com/storybooks/storybook/pull/4310)
+- [ember] add dependencies to root application [#4309](https://github.com/storybooks/storybook/pull/4309)
+
+#### Dependency Upgrades
+
+- Re-generate lockfiles [#4404](https://github.com/storybooks/storybook/pull/4404)
+- Run `yarn upgrade-interactive --latest` in root and docs [#4403](https://github.com/storybooks/storybook/pull/4403)
+- chore(deps): #4267 upgrade lodash to latest [#4284](https://github.com/storybooks/storybook/pull/4284)
+- Bump express from 4.16.3 to 4.16.4 [#4370](https://github.com/storybooks/storybook/pull/4370)
+- Bump @angular/cli from 6.2.4 to 6.2.5 [#4390](https://github.com/storybooks/storybook/pull/4390)
+- CHANGE back to use html-webpack-plugin to keep compatibility with plugins that depend on it [#4375](https://github.com/storybooks/storybook/pull/4375)
+- Bump danger from 4.4.6 to 4.4.7 [#4365](https://github.com/storybooks/storybook/pull/4365)
+- Bump @storybook/react from 3.4.8 to 3.4.11 in /docs [#4354](https://github.com/storybooks/storybook/pull/4354)
+- Bump sitemap from 1.13.0 to 2.0.1 in /docs [#4356](https://github.com/storybooks/storybook/pull/4356)
+- Bump husky from 1.1.1 to 1.1.2 [#4358](https://github.com/storybooks/storybook/pull/4358)
+- Tech/upgrades 5 [#4347](https://github.com/storybooks/storybook/pull/4347)
+
 # 4.0.0-alpha.24
 
 2018-October-04

examples/ember-cli/package.json

@@ -23,13 +23,13 @@
  "@storybook/addons": "4.0.0-alpha.24",
  "@storybook/ember": "4.0.0-alpha.24",
  "babel-loader": "^8",
- "broccoli-asset-rev": "^2.4.5",
+ "broccoli-asset-rev": "^3.0.0",
  "cross-env": "^5.2.0",
  "ember-ajax": "^3.1.2",
  "ember-cli": "~3.4.0",
  "ember-cli-app-version": "^3.0.0",
  "ember-cli-babel": "^7.1.2",
- "ember-cli-htmlbars": "^2.0.1",
+ "ember-cli-htmlbars": "^3.0.1",
  "ember-cli-htmlbars-inline-precompile": "^1.0.5",
  "ember-cli-inject-live-reload": "^1.4.1",
  "ember-cli-shims": "^1.2.0",

lib/cli/bin/generate.js

@@ -20,7 +20,7 @@ if (process.argv[1].includes('getstorybook')) {
  .option('-s --skip-install', 'Skip installing deps')
  .option('-N --use-npm', 'Use npm to install deps')
  .option('-p --parser <babel | babylon | flow>', 'jscodeshift parser')
- .option('-h --html', 'Add storybook for HTML')
+ .option('-t --type <type>', 'Add Storybook for a specific project type')
  .action(options => initiate(options, pkg));
 
  program.command('*', { noHelp: true }).action(cmd => {

lib/cli/lib/detect.js

@@ -1,6 +1,6 @@
 import path from 'path';
 import fs from 'fs';
-import types from './project_types';
+import types, { supportedFrameworks } from './project_types';
 import { getBowerJson, getPackageJson } from './helpers';
 
 function detectFramework(dependencies) {
@@ -105,22 +105,12 @@ function detectFramework(dependencies) {
  return false;
 }
 
-function isStorybookInstalled(dependencies, force) {
+export function isStorybookInstalled(dependencies, force) {
  if (!dependencies) {
  return false;
  }
 
  if (!force && dependencies.devDependencies) {
- const supportedFrameworks = [
- 'react',
- 'react-native',
- 'vue',
- 'angular',
- 'polymer',
- 'mithril',
- 'riot',
- 'ember',
- ];
  if (
  supportedFrameworks.reduce(
  (storybookPresent, framework) =>

lib/cli/lib/detect.test.js

@@ -0,0 +1,27 @@
+import { isStorybookInstalled } from './detect';
+import { supportedFrameworks } from './project_types';
+
+describe('isStorybookInstalled should return', () => {
+ it('false if empty devDependency', () => {
+ expect(isStorybookInstalled({ devDependencies: {} }, false)).toBe(false);
+ });
+ it('false if no devDependency', () => {
+ expect(isStorybookInstalled({}, false)).toBe(false);
+ });
+
+ supportedFrameworks.forEach(framework => {
+ it(`true if devDependencies has ${framework} Storybook version`, () => {
+ const devDependencies = {};
+ devDependencies[`@storybook/${framework}`] = '4.0.0-alpha.21';
+ expect(isStorybookInstalled({ devDependencies }, false)).toBeTruthy();
+ });
+ });
+
+ it('true if forced flag', () => {
+ expect(
+ isStorybookInstalled({
+ devDependencies: { 'storybook/react': '4.0.0-alpha.21' },
+ })
+ ).toBe(false);
+ });
+});

lib/cli/lib/initiate.js

@@ -1,9 +1,10 @@
 import updateNotifier from 'update-notifier';
 import chalk from 'chalk';
-import detect from './detect';
+import inquirer from 'inquirer';
+import detect, { isStorybookInstalled } from './detect';
 import hasYarn from './has_yarn';
-import types from './project_types';
-import { commandLog, codeLog, paddedLog, installDeps } from './helpers';
+import types, { installableProjectTypes } from './project_types';
+import { commandLog, codeLog, paddedLog, installDeps, getPackageJson } from './helpers';
 import angularGenerator from '../generators/ANGULAR';
 import emberGenerator from '../generators/EMBER';
 import meteorGenerator from '../generators/METEOR';
@@ -22,10 +23,7 @@ import riotGenerator from '../generators/RIOT';
 
 const logger = console;
 
-export default function(options, pkg) {
- const welcomeMessage = 'sb init - the simplest way to add a storybook to your project.';
- logger.log(chalk.inverse(`\n ${welcomeMessage} \n`));
-
+const installStorybook = (projectType, options) => {
  const useYarn = Boolean(options.useNpm !== true) && hasYarn();
 
  const npmOptions = {
@@ -34,23 +32,6 @@ export default function(options, pkg) {
 
  const runStorybookCommand = useYarn ? 'yarn storybook' : 'npm run storybook';
 
- // Update notify code.
- updateNotifier({
- pkg,
- updateCheckInterval: 1000 * 60 * 60, // every hour (we could increase this later on.)
- }).notify();
-
- let projectType;
-
- const done = commandLog('Detecting project type');
- try {
- projectType = detect(options);
- } catch (ex) {
- done(ex.message);
- process.exit(1);
- }
- done();
-
  const end = () => {
  if (!options.skipInstall) {
  installDeps(npmOptions);
@@ -73,7 +54,7 @@ export default function(options, pkg) {
  logger.log();
  paddedLog('There seems to be a storybook already available in this project.');
  paddedLog('Apply following command to force:\n');
- codeLog(['sb init -f']);
+ codeLog(['sb init [options] -f']);
 
  // Add a new line for the clear visibility.
  logger.log();
@@ -172,20 +153,83 @@ export default function(options, pkg) {
  default:
  paddedLog(`We couldn't detect your project type. (code: ${projectType})`);
  paddedLog(
- "Please make sure you are running the `sb init` command in your project's root directory."
- );
- paddedLog(
- 'You can also install storybook for plain HTML snippets with `sb init --html` or follow some of the slow start guides: https://storybook.js.org/basics/slow-start-guide/'
+ 'You can specify a project type explicitly via `sb init --type <type>` or follow some of the slow start guides: https://storybook.js.org/basics/slow-start-guide/'
  );
 
  // Add a new line for the clear visibility.
  logger.log();
- return Promise.resolve();
+ // eslint-disable-next-line no-use-before-define
+ return projectTypeInquirer(options);
  }
  };
 
  return runGenerator().catch(ex => {
  logger.error(`\n ${chalk.red(ex.stack)}`);
  process.exit(1);
  });
+};
+
+const projectTypeInquirer = async options => {
+ const manualAnswer = await inquirer.prompt([
+ {
+ type: 'confirm',
+ name: 'manual',
+ message: 'Do you want to manually choose a Storybook project type to install?',
+ default: false,
+ },
+ ]);
+
+ if (manualAnswer.manual) {
+ const frameworkAnswer = await inquirer.prompt([
+ {
+ type: 'list',
+ name: 'manualFramework',
+ message: 'Please choose a project type from the following list:',
+ choices: installableProjectTypes.map(type => type.toUpperCase()),
+ },
+ ]);
+ return installStorybook(frameworkAnswer.manualFramework, options);
+ }
+ return Promise.resolve();
+};
+
+export default function(options, pkg) {
+ const welcomeMessage = 'sb init - the simplest way to add a storybook to your project.';
+ logger.log(chalk.inverse(`\n ${welcomeMessage} \n`));
+
+ // Update notify code.
+ updateNotifier({
+ pkg,
+ updateCheckInterval: 1000 * 60 * 60, // every hour (we could increase this later on.)
+ }).notify();
+
+ let projectType;
+ const projectTypeProvided = options.type;
+ const infoText = projectTypeProvided
+ ? 'Installing Storybook for user specified project type'
+ : 'Detecting project type';
+ const done = commandLog(infoText);
+
+ try {
+ if (projectTypeProvided) {
+ if (installableProjectTypes.includes(options.type)) {
+ const storybookInstalled = isStorybookInstalled(getPackageJson(), options.force);
+ projectType = storybookInstalled ? types.ALREADY_HAS_STORYBOOK : options.type.toUpperCase();
+ } else {
+ done(`The provided project type was not recognized by Storybook.`);
+ logger.log(`\nThe project types currently supported by Storybook are:\n`);
+ installableProjectTypes.sort().forEach(framework => paddedLog(`- ${framework}`));
+ logger.log();
+ process.exit(1);
+ }
+ } else {
+ projectType = detect(options);
+ }
+ } catch (ex) {
+ done(ex.message);
+ process.exit(1);
+ }
+ done();
+
+ return installStorybook(projectType, options);
 }

lib/cli/lib/project_types.js

@@ -1,4 +1,4 @@
-export default {
+const projectTypes = {
  UNDETECTED: 'UNDETECTED',
  REACT_SCRIPTS: 'REACT_SCRIPTS',
  METEOR: 'METEOR',
@@ -18,3 +18,28 @@ export default {
  HTML: 'HTML',
  RIOT: 'RIOT',
 };
+
+export default projectTypes;
+
+export const supportedFrameworks = [
+ 'react',
+ 'react-native',
+ 'vue',
+ 'angular',
+ 'polymer',
+ 'mithril',
+ 'riot',
+ 'ember',
+ 'marko',
+ 'meteor',
+];
+
+const notInstallableProjectTypes = [
+ projectTypes.UNDETECTED,
+ projectTypes.ALREADY_HAS_STORYBOOK,
+ projectTypes.UPDATE_PACKAGE_ORGANIZATIONS,
+];
+
+export const installableProjectTypes = Object.values(projectTypes)
+ .filter(type => !notInstallableProjectTypes.includes(type))
+ .map(type => type.toLowerCase());

lib/cli/lib/project_types.test.js

@@ -0,0 +1,9 @@
+import { installableProjectTypes, supportedFrameworks } from './project_types';
+
+describe('installableProjectTypes should have an entry for the supported framework', () => {
+ supportedFrameworks.forEach(framework => {
+ it(`${framework}`, () => {
+ expect(installableProjectTypes.includes(framework.replace(/-/g, '_'))).toBe(true);
+ });
+ });
+});

lib/cli/package.json

@@ -39,6 +39,7 @@
  "child-process-promise": "^2.2.1",
  "commander": "^2.19.0",
  "cross-spawn": "^6.0.5",
+ "inquirer": "^6.2.0",
  "jscodeshift": "^0.5.1",
  "json5": "^2.1.0",
  "merge-dirs": "^0.2.1",

yarn.lock

@@ -4850,22 +4850,22 @@ broccoli-amd-funnel@^1.3.0:
  broccoli-plugin "^1.3.0"
  symlink-or-copy "^1.2.0"
 
-broccoli-asset-rev@^2.4.5:
- version "2.7.0"
- resolved "https://registry.yarnpkg.com/broccoli-asset-rev/-/broccoli-asset-rev-2.7.0.tgz#c73da1d97c4180366fa442a87624ca1b7fb99161"
- integrity sha512-GZ7gU3Qo6HMAUqDeh1q+4UVCQPJPjCyGcpIY5s9Qp58a244FT4nZSiy8qYkVC4LLIWTZt59G7jFFsUcj/13IPQ==
+broccoli-asset-rev@3.0.0:
+ version "3.0.0"
+ resolved "https://registry.yarnpkg.com/broccoli-asset-rev/-/broccoli-asset-rev-3.0.0.tgz#65a28c8a062d6ee2cffd91ed2a8309e0f8253ac6"
+ integrity sha512-gAHQZnwvtl74tGevUqGuWoyOdJUdMMv0TjGSMzbdyGImr9fZcnM6xmggDA8bUawrMto9NFi00ZtNUgA4dQiUBw==
  dependencies:
- broccoli-asset-rewrite "^1.1.0"
+ broccoli-asset-rewrite "^2.0.0"
  broccoli-filter "^1.2.2"
  broccoli-persistent-filter "^1.4.3"
  json-stable-stringify "^1.0.0"
  minimatch "^3.0.4"
  rsvp "^3.0.6"
 
-broccoli-asset-rewrite@^1.1.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/broccoli-asset-rewrite/-/broccoli-asset-rewrite-1.1.0.tgz#77a5da56157aa318c59113245e8bafb4617f8830"
- integrity sha1-d6XaVhV6oxjFkRMkXouvtGF/iDA=
+broccoli-asset-rewrite@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/broccoli-asset-rewrite/-/broccoli-asset-rewrite-2.0.0.tgz#603c4a52d4c8987a2f681254436923ac0a9c94ab"
+ integrity sha512-dqhxdQpooNi7LHe8J9Jdxp6o3YPFWl4vQmint6zrsn2sVbOo+wpyiX3erUSt0IBtjNkAxqJjuvS375o2cLBHTA==
  dependencies:
  broccoli-filter "^1.2.3"
 
@@ -8094,10 +8094,10 @@ ember-cli-htmlbars-inline-precompile@^1.0.0, ember-cli-htmlbars-inline-precompil
  heimdalljs-logger "^0.1.9"
  silent-error "^1.1.0"
 
-ember-cli-htmlbars@^2.0.1:
- version "2.0.5"
- resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-2.0.5.tgz#b5a105429a6bce4f7c9c97b667e3b8926e31397f"
- integrity sha512-3f3PAxdnQ/fhQa8XP/3z4RLRgLHxV8j4Ln75aHbRdemOCjBa048KxL9l+acRLhCulbGQCMnLiIUIC89PAzLrcA==
+ember-cli-htmlbars@3.0.1:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-3.0.1.tgz#01e21f0fd05e0a6489154f26614b1041769e3e58"
+ integrity sha512-pyyB2s52vKTXDC5svU3IjU7GRLg2+5O81o9Ui0ZSiBS14US/bZl46H2dwcdSJAK+T+Za36ZkQM9eh1rNwOxfoA==
  dependencies:
  broccoli-persistent-filter "^1.4.3"
  hash-for-dep "^1.2.3"