From 3ad322f7d0864398c9cb7de7826034b1174189fa Mon Sep 17 00:00:00 2001
From: y-kurami <yosuke.kurami@gmail.com>
Date: Fri, 12 Jan 2018 18:48:44 +0900
Subject: [PATCH 1/8] add ability to merge ng cli webpack config

---
 app/angular/src/server/angular-cli_config.js  | 69 +++++++++++++++++++
 app/angular/src/server/config.js              | 15 +++-
 .../src/server/config/webpack.config.js       |  4 --
 .../src/server/config/webpack.config.prod.js  |  4 --
 4 files changed, 82 insertions(+), 10 deletions(-)
 create mode 100644 app/angular/src/server/angular-cli_config.js

diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js
new file mode 100644
index 000000000000..9aac7b175fad
--- /dev/null
+++ b/app/angular/src/server/angular-cli_config.js
@@ -0,0 +1,69 @@
+const path = require('path');
+const fs = require('fs');
+
+export function getAngularCliWebpackConfigOptions(dirToSearch, appIndex = 0) {
+  const fname = path.join(dirToSearch, '.angular-cli.json');
+  if (!fs.existsSync(fname)) {
+    return null;
+  }
+  const cliConfig = JSON.parse(fs.readFileSync(fname, 'utf8'));
+  if (!cliConfig.apps || !cliConfig.apps.length) {
+    throw new Error('.angular-cli.json must have apps entry.');
+  }
+  const appConfig = cliConfig.apps[appIndex];
+
+  // FIXME dummy value
+  const cliWebpackConfigOptions = {
+    projectRoot: dirToSearch,
+    appConfig,
+    buildOptions: {
+      outputPath: 'outputPath',
+    },
+    supportES2015: false,
+  };
+
+  return cliWebpackConfigOptions;
+}
+
+export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions) {
+  if (!cliWebpackConfigOptions) return baseConfig;
+
+  let ngcliConfigFactory;
+  try {
+    // We should not require('@angular/cli') at the top script level because user project might not have `@angular/cli`.
+    // eslint-disable-next-line global-require, import/no-extraneous-dependencies
+    ngcliConfigFactory = require('@angular/cli/models/webpack-configs');
+  } catch (e) {
+    return baseConfig;
+  }
+
+  const cliCommonConfig = ngcliConfigFactory.getCommonConfig(cliWebpackConfigOptions);
+  const cliStyleConfig = ngcliConfigFactory.getStylesConfig(cliWebpackConfigOptions);
+
+  // Don't use storybooks .css rules because we have to use .css rules created by @angualr/cli
+  // because @angular/cli created has include/exclude rules of global .css files.
+  const styleRules = baseConfig.module.rules.filter(
+    rule => !rule.test || rule.test.toString() !== '/\\.css$/'
+  );
+
+  // cliStyleConfig.entry adds global style files to the webpack context
+  const entry = {
+    ...baseConfig.entry,
+    ...cliStyleConfig.entry,
+  };
+
+  const mod = {
+    ...baseConfig.module,
+    rules: [...cliStyleConfig.module.rules, ...styleRules],
+  };
+
+  // We use cliCommonConfig plugins to serve static assets files.
+  const plugins = [...cliStyleConfig.plugins, ...cliCommonConfig.plugins, ...baseConfig.plugins];
+
+  return {
+    ...baseConfig,
+    entry,
+    module: mod,
+    plugins,
+  };
+}
diff --git a/app/angular/src/server/config.js b/app/angular/src/server/config.js
index dcf9e41ee5be..511d9c317457 100644
--- a/app/angular/src/server/config.js
+++ b/app/angular/src/server/config.js
@@ -3,6 +3,10 @@ import fs from 'fs';
 import path from 'path';
 import loadBabelConfig from './babel_config';
 import loadTsConfig from './ts_config';
+import {
+  getAngularCliWebpackConfigOptions,
+  applyAngularCliWebpackConfig,
+} from './angular-cli_config';
 
 // avoid ESLint errors
 const logger = console;
@@ -39,6 +43,12 @@ export default function(configType, baseConfig, configDir) {
     config.entry.manager.unshift(storybookDefaultAddonsPath);
   }
 
+  // Check whether project has Angular CLI configuration file
+  const cliWebpackConfigOptions = getAngularCliWebpackConfigOptions(process.cwd());
+  if (cliWebpackConfigOptions) {
+    logger.info('=> Loading angular-cli config.');
+  }
+
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
   const customConfigPath = path.resolve(configDir, 'webpack.config.js');
@@ -48,15 +58,16 @@ export default function(configType, baseConfig, configDir) {
     const configPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
     const customConfig = require(configPath);
 
-    return customConfig(config);
+    return applyAngularCliWebpackConfig(customConfig(config), cliWebpackConfigOptions);
   }
   const customConfig = require(customConfigPath);
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    return customConfig(config, configType);
+    return customConfig(applyAngularCliWebpackConfig(config, cliWebpackConfigOptions), configType);
   }
   logger.info('=> Loading custom webpack config (extending mode).');
+
   return {
     ...customConfig,
     // We'll always load our configurations after the custom config.
diff --git a/app/angular/src/server/config/webpack.config.js b/app/angular/src/server/config/webpack.config.js
index fccf87ea32eb..ed609ddc3257 100644
--- a/app/angular/src/server/config/webpack.config.js
+++ b/app/angular/src/server/config/webpack.config.js
@@ -76,10 +76,6 @@ export default function(configDir) {
           loader: 'raw-loader',
           exclude: /\.async\.css$/,
         },
-        {
-          test: /\.scss$/,
-          loaders: [require.resolve('raw-loader'), require.resolve('sass-loader')],
-        },
         {
           test: /\.md$/,
           use: [
diff --git a/app/angular/src/server/config/webpack.config.prod.js b/app/angular/src/server/config/webpack.config.prod.js
index 4adf3deba0e4..fcd187c039dd 100644
--- a/app/angular/src/server/config/webpack.config.prod.js
+++ b/app/angular/src/server/config/webpack.config.prod.js
@@ -88,10 +88,6 @@ export default function(configDir) {
           loader: 'raw-loader',
           exclude: /\.async\.html$/,
         },
-        {
-          test: /\.scss$/,
-          loaders: [require.resolve('raw-loader'), require.resolve('sass-loader')],
-        },
       ],
     },
     resolve: {

From b91744c6ca480007dcbd753307148b303c5ceafb Mon Sep 17 00:00:00 2001
From: y-kurami <yosuke.kurami@gmail.com>
Date: Sat, 13 Jan 2018 02:49:57 +0900
Subject: [PATCH 2/8] add example stories to test styles pattern

---
 .../src/stories/component-with-style/styled.component.css | 3 +++
 .../stories/component-with-style/styled.component.html    | 5 +++++
 .../stories/component-with-style/styled.component.scss    | 5 +++++
 .../component-with-style/styled.component.stories.ts      | 6 ++++++
 .../src/stories/component-with-style/styled.component.ts  | 8 ++++++++
 examples/angular-cli/src/styles.css                       | 4 ++++
 6 files changed, 31 insertions(+)
 create mode 100644 examples/angular-cli/src/stories/component-with-style/styled.component.css
 create mode 100644 examples/angular-cli/src/stories/component-with-style/styled.component.html
 create mode 100644 examples/angular-cli/src/stories/component-with-style/styled.component.scss
 create mode 100644 examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts
 create mode 100644 examples/angular-cli/src/stories/component-with-style/styled.component.ts

diff --git a/examples/angular-cli/src/stories/component-with-style/styled.component.css b/examples/angular-cli/src/stories/component-with-style/styled.component.css
new file mode 100644
index 000000000000..fdfe0940158f
--- /dev/null
+++ b/examples/angular-cli/src/stories/component-with-style/styled.component.css
@@ -0,0 +1,3 @@
+.red-color {
+  color: red;
+}
diff --git a/examples/angular-cli/src/stories/component-with-style/styled.component.html b/examples/angular-cli/src/stories/component-with-style/styled.component.html
new file mode 100644
index 000000000000..129e735ec5b0
--- /dev/null
+++ b/examples/angular-cli/src/stories/component-with-style/styled.component.html
@@ -0,0 +1,5 @@
+<div>
+  <p class="red-color">Styled with scoped CSS</p>
+  <p class="blue-color">Styled with scoped SCSS</p>
+  <p class="green-color">Styled with global CSS</p>
+</div>
diff --git a/examples/angular-cli/src/stories/component-with-style/styled.component.scss b/examples/angular-cli/src/stories/component-with-style/styled.component.scss
new file mode 100644
index 000000000000..5895f510a1da
--- /dev/null
+++ b/examples/angular-cli/src/stories/component-with-style/styled.component.scss
@@ -0,0 +1,5 @@
+div {
+  p.blue-color {
+    color: blue;
+  }
+}
diff --git a/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts b/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts
new file mode 100644
index 000000000000..b1ec85245c3a
--- /dev/null
+++ b/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts
@@ -0,0 +1,6 @@
+import { storiesOf } from '@storybook/angular';
+import { StyledComponent } from './styled.component';
+
+storiesOf('Component styles', module).add('Component with styles', () => ({
+  component: StyledComponent,
+}));
diff --git a/examples/angular-cli/src/stories/component-with-style/styled.component.ts b/examples/angular-cli/src/stories/component-with-style/styled.component.ts
new file mode 100644
index 000000000000..6cdb0a9a627b
--- /dev/null
+++ b/examples/angular-cli/src/stories/component-with-style/styled.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'storybook-styled-component',
+  templateUrl: './styled.component.html',
+  styleUrls: ['./styled.component.css', './styled.component.scss'],
+})
+export class StyledComponent {}
diff --git a/examples/angular-cli/src/styles.css b/examples/angular-cli/src/styles.css
index 90d4ee0072ce..c345db97a8d2 100644
--- a/examples/angular-cli/src/styles.css
+++ b/examples/angular-cli/src/styles.css
@@ -1 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+
+.green-color {
+  color: green;
+}

From 2a5f4bc8af7c8c76e54c5654f77001ac0944f1f9 Mon Sep 17 00:00:00 2001
From: y-kurami <yosuke.kurami@gmail.com>
Date: Sat, 13 Jan 2018 19:16:52 +0900
Subject: [PATCH 3/8] extract a func to detect wheter ngcli installed

---
 app/angular/src/server/angular-cli_config.js | 32 +++++++++++++++-----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js
index 9aac7b175fad..f4dc8a04e6ba 100644
--- a/app/angular/src/server/angular-cli_config.js
+++ b/app/angular/src/server/angular-cli_config.js
@@ -1,6 +1,17 @@
 const path = require('path');
 const fs = require('fs');
 
+const logger = console;
+
+export function isAngularCliInstalled() {
+  try {
+    require.resolve('@angular/cli');
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
 export function getAngularCliWebpackConfigOptions(dirToSearch, appIndex = 0) {
   const fname = path.join(dirToSearch, '.angular-cli.json');
   if (!fs.existsSync(fname)) {
@@ -28,17 +39,24 @@ export function getAngularCliWebpackConfigOptions(dirToSearch, appIndex = 0) {
 export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions) {
   if (!cliWebpackConfigOptions) return baseConfig;
 
-  let ngcliConfigFactory;
+  if (!isAngularCliInstalled()) {
+    logger.info('=> Using base config because @angular/cli is not installed.');
+    return baseConfig;
+  }
+
+  // eslint-disable-next-line global-require, import/no-extraneous-dependencies
+  const ngcliConfigFactory = require('@angular/cli/models/webpack-configs');
+
+  let cliCommonConfig;
+  let cliStyleConfig;
   try {
-    // We should not require('@angular/cli') at the top script level because user project might not have `@angular/cli`.
-    // eslint-disable-next-line global-require, import/no-extraneous-dependencies
-    ngcliConfigFactory = require('@angular/cli/models/webpack-configs');
+    cliCommonConfig = ngcliConfigFactory.getCommonConfig(cliWebpackConfigOptions);
+    cliStyleConfig = ngcliConfigFactory.getStylesConfig(cliWebpackConfigOptions);
   } catch (e) {
+    logger.warn('=> Failed to get angular-cli webpack config.');
     return baseConfig;
   }
-
-  const cliCommonConfig = ngcliConfigFactory.getCommonConfig(cliWebpackConfigOptions);
-  const cliStyleConfig = ngcliConfigFactory.getStylesConfig(cliWebpackConfigOptions);
+  logger.info('=> Get angular-cli webpack config.');
 
   // Don't use storybooks .css rules because we have to use .css rules created by @angualr/cli
   // because @angular/cli created has include/exclude rules of global .css files.

From fb7bd691ce1515a4ff5cf2c84e3e5f171af230f1 Mon Sep 17 00:00:00 2001
From: y-kurami <yosuke.kurami@gmail.com>
Date: Sat, 13 Jan 2018 19:20:01 +0900
Subject: [PATCH 4/8] chore: modify comment

---
 app/angular/src/server/angular-cli_config.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js
index f4dc8a04e6ba..e3a9086fba6f 100644
--- a/app/angular/src/server/angular-cli_config.js
+++ b/app/angular/src/server/angular-cli_config.js
@@ -23,12 +23,11 @@ export function getAngularCliWebpackConfigOptions(dirToSearch, appIndex = 0) {
   }
   const appConfig = cliConfig.apps[appIndex];
 
-  // FIXME dummy value
   const cliWebpackConfigOptions = {
     projectRoot: dirToSearch,
     appConfig,
     buildOptions: {
-      outputPath: 'outputPath',
+      outputPath: 'outputPath', // It's dummy value to avoid to Angular CLI's error
     },
     supportES2015: false,
   };

From 037c08b583bbf6feb72849831742d38be18f268b Mon Sep 17 00:00:00 2001
From: y-kurami <yosuke.kurami@gmail.com>
Date: Mon, 15 Jan 2018 14:38:01 +0900
Subject: [PATCH 5/8] revert to drop scss rules

---
 app/angular/src/server/angular-cli_config.js         | 7 ++++---
 app/angular/src/server/config/webpack.config.js      | 4 ++++
 app/angular/src/server/config/webpack.config.prod.js | 4 ++++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js
index e3a9086fba6f..e733b9727a90 100644
--- a/app/angular/src/server/angular-cli_config.js
+++ b/app/angular/src/server/angular-cli_config.js
@@ -57,10 +57,11 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions
   }
   logger.info('=> Get angular-cli webpack config.');
 
-  // Don't use storybooks .css rules because we have to use .css rules created by @angualr/cli
-  // because @angular/cli created has include/exclude rules of global .css files.
+  // Don't use storybooks .css/.scss rules because we have to use rules created by @angualr/cli
+  // because @angular/cli created rules have include/exclude for global style files.
   const styleRules = baseConfig.module.rules.filter(
-    rule => !rule.test || rule.test.toString() !== '/\\.css$/'
+    rule =>
+      !rule.test || (rule.test.toString() !== '/\\.css$/' && rule.test.toString() !== '/\\.scss$/')
   );
 
   // cliStyleConfig.entry adds global style files to the webpack context
diff --git a/app/angular/src/server/config/webpack.config.js b/app/angular/src/server/config/webpack.config.js
index ed609ddc3257..fccf87ea32eb 100644
--- a/app/angular/src/server/config/webpack.config.js
+++ b/app/angular/src/server/config/webpack.config.js
@@ -76,6 +76,10 @@ export default function(configDir) {
           loader: 'raw-loader',
           exclude: /\.async\.css$/,
         },
+        {
+          test: /\.scss$/,
+          loaders: [require.resolve('raw-loader'), require.resolve('sass-loader')],
+        },
         {
           test: /\.md$/,
           use: [
diff --git a/app/angular/src/server/config/webpack.config.prod.js b/app/angular/src/server/config/webpack.config.prod.js
index fcd187c039dd..4adf3deba0e4 100644
--- a/app/angular/src/server/config/webpack.config.prod.js
+++ b/app/angular/src/server/config/webpack.config.prod.js
@@ -88,6 +88,10 @@ export default function(configDir) {
           loader: 'raw-loader',
           exclude: /\.async\.html$/,
         },
+        {
+          test: /\.scss$/,
+          loaders: [require.resolve('raw-loader'), require.resolve('sass-loader')],
+        },
       ],
     },
     resolve: {

From a21777fd80c0b2727b459d111bc5b86aa3a63792 Mon Sep 17 00:00:00 2001
From: y-kurami <yosuke.kurami@gmail.com>
Date: Tue, 16 Jan 2018 10:36:39 +0900
Subject: [PATCH 6/8] change variable name

---
 app/angular/src/server/angular-cli_config.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js
index e733b9727a90..dfd930cdc6f7 100644
--- a/app/angular/src/server/angular-cli_config.js
+++ b/app/angular/src/server/angular-cli_config.js
@@ -3,7 +3,7 @@ const fs = require('fs');
 
 const logger = console;
 
-export function isAngularCliInstalled() {
+function isAngularCliInstalled() {
   try {
     require.resolve('@angular/cli');
     return true;
@@ -59,7 +59,7 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions
 
   // Don't use storybooks .css/.scss rules because we have to use rules created by @angualr/cli
   // because @angular/cli created rules have include/exclude for global style files.
-  const styleRules = baseConfig.module.rules.filter(
+  const rulesExcludingStyles = baseConfig.module.rules.filter(
     rule =>
       !rule.test || (rule.test.toString() !== '/\\.css$/' && rule.test.toString() !== '/\\.scss$/')
   );
@@ -72,7 +72,7 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions
 
   const mod = {
     ...baseConfig.module,
-    rules: [...cliStyleConfig.module.rules, ...styleRules],
+    rules: [...cliStyleConfig.module.rules, ...rulesExcludingStyles],
   };
 
   // We use cliCommonConfig plugins to serve static assets files.

From 44ec036d3283166d0c8c8027567fcad1af73ccbd Mon Sep 17 00:00:00 2001
From: y-kurami <yosuke.kurami@gmail.com>
Date: Wed, 17 Jan 2018 11:05:32 +0900
Subject: [PATCH 7/8] use node-logger instead of console

---
 app/angular/package.json                     | 1 +
 app/angular/src/server/angular-cli_config.js | 7 +++----
 app/angular/src/server/babel_config.js       | 4 +---
 app/angular/src/server/build.js              | 8 +++-----
 app/angular/src/server/config.js             | 4 +---
 app/angular/src/server/index.js              | 5 ++---
 app/angular/src/server/ts_config.js          | 4 +---
 7 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/app/angular/package.json b/app/angular/package.json
index bbf028dac8fa..09b81243a486 100644
--- a/app/angular/package.json
+++ b/app/angular/package.json
@@ -28,6 +28,7 @@
     "@storybook/addons": "^3.4.0-alpha.4",
     "@storybook/channel-postmessage": "^3.4.0-alpha.4",
     "@storybook/core": "^3.4.0-alpha.4",
+    "@storybook/node-logger": "^3.4.0-alpha.4",
     "@storybook/ui": "^3.4.0-alpha.4",
     "airbnb-js-shims": "^1.1.1",
     "angular2-template-loader": "^0.6.2",
diff --git a/app/angular/src/server/angular-cli_config.js b/app/angular/src/server/angular-cli_config.js
index dfd930cdc6f7..1c854342b8ba 100644
--- a/app/angular/src/server/angular-cli_config.js
+++ b/app/angular/src/server/angular-cli_config.js
@@ -1,7 +1,6 @@
-const path = require('path');
-const fs = require('fs');
-
-const logger = console;
+import path from 'path';
+import fs from 'fs';
+import { logger } from '@storybook/node-logger';
 
 function isAngularCliInstalled() {
   try {
diff --git a/app/angular/src/server/babel_config.js b/app/angular/src/server/babel_config.js
index eb405ed9fabb..23b2adaab975 100644
--- a/app/angular/src/server/babel_config.js
+++ b/app/angular/src/server/babel_config.js
@@ -1,11 +1,9 @@
 import fs from 'fs';
 import path from 'path';
 import JSON5 from 'json5';
+import { logger } from '@storybook/node-logger';
 import defaultConfig from './config/babel';
 
-// avoid ESLint errors
-const logger = console;
-
 function removeReactHmre(presets) {
   const index = presets.indexOf('react-hmre');
   if (index > -1) {
diff --git a/app/angular/src/server/build.js b/app/angular/src/server/build.js
index ea488da6a0ee..be115537ab72 100755
--- a/app/angular/src/server/build.js
+++ b/app/angular/src/server/build.js
@@ -4,6 +4,7 @@ import path from 'path';
 import fs from 'fs';
 import chalk from 'chalk';
 import shelljs from 'shelljs';
+import { logger } from '@storybook/node-logger';
 import packageJson from '../../package.json';
 import getBaseConfig from './config/webpack.config.prod';
 import loadConfig from './config';
@@ -11,9 +12,6 @@ import { parseList, getEnvConfig } from './utils';
 
 process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 
-// avoid ESLint errors
-const logger = console;
-
 program
   .version(packageJson.version)
   .option('-s, --static-dir <dir-names>', 'Directory where to load static files from', parseList)
@@ -66,13 +64,13 @@ if (program.staticDir) {
       logger.error(`Error: no such directory to load static files: ${dir}`);
       process.exit(-1);
     }
-    logger.log(`=> Copying static files from: ${dir}`);
+    logger.info(`=> Copying static files from: ${dir}`);
     shelljs.cp('-r', `${dir}/*`, outputDir);
   });
 }
 
 // compile all resources with webpack and write them to the disk.
-logger.log('Building storybook ...');
+logger.info('Building storybook ...');
 webpack(config).run((err, stats) => {
   if (err || stats.hasErrors()) {
     logger.error('Failed to build the storybook');
diff --git a/app/angular/src/server/config.js b/app/angular/src/server/config.js
index 511d9c317457..4b7958e9036b 100644
--- a/app/angular/src/server/config.js
+++ b/app/angular/src/server/config.js
@@ -1,6 +1,7 @@
 /* eslint-disable global-require, import/no-dynamic-require */
 import fs from 'fs';
 import path from 'path';
+import { logger } from '@storybook/node-logger';
 import loadBabelConfig from './babel_config';
 import loadTsConfig from './ts_config';
 import {
@@ -8,9 +9,6 @@ import {
   applyAngularCliWebpackConfig,
 } from './angular-cli_config';
 
-// avoid ESLint errors
-const logger = console;
-
 // `baseConfig` is a webpack configuration bundled with storybook.
 // Storybook will look in the `configDir` directory
 // (inside working directory) if a config path is not provided.
diff --git a/app/angular/src/server/index.js b/app/angular/src/server/index.js
index 96234d9e0f83..3b4567f1e1ee 100755
--- a/app/angular/src/server/index.js
+++ b/app/angular/src/server/index.js
@@ -8,14 +8,13 @@ import path from 'path';
 import fs from 'fs';
 import chalk from 'chalk';
 import shelljs from 'shelljs';
+import { logger } from '@storybook/node-logger';
 import storybook, { webpackValid } from './middleware';
 import packageJson from '../../package.json';
 import { parseList, getEnvConfig } from './utils';
 
 process.env.NODE_ENV = process.env.NODE_ENV || 'development';
 
-const logger = console;
-
 program
   .version(packageJson.version)
   .option('-p, --port [number]', 'Port to run Storybook (Required)', parseInt)
@@ -105,7 +104,7 @@ if (program.staticDir) {
       logger.error(`Error: no such directory to load static files: ${staticPath}`);
       process.exit(-1);
     }
-    logger.log(`=> Loading static files from: ${staticPath} .`);
+    logger.info(`=> Loading static files from: ${staticPath} .`);
     app.use(express.static(staticPath, { index: false }));
 
     const faviconPath = path.resolve(staticPath, 'favicon.ico');
diff --git a/app/angular/src/server/ts_config.js b/app/angular/src/server/ts_config.js
index cdf1106a2f3e..942ca4f245d9 100644
--- a/app/angular/src/server/ts_config.js
+++ b/app/angular/src/server/ts_config.js
@@ -1,8 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-
-// avoid ESLint errors
-const logger = console;
+import { logger } from '@storybook/node-logger';
 
 function resolveTsConfig(tsConfigPath) {
   if (!fs.existsSync(tsConfigPath)) {

From 25397649549e4dac9ea5478c7f6a49b464683ee8 Mon Sep 17 00:00:00 2001
From: y-kurami <yosuke.kurami@gmail.com>
Date: Thu, 18 Jan 2018 11:39:28 +0900
Subject: [PATCH 8/8] add snapshot file

---
 .../styled.component.stories.storyshot        | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot

diff --git a/examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot b/examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot
new file mode 100644
index 000000000000..d2a95b1f3523
--- /dev/null
+++ b/examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Component styles Component with styles 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-styled-component>
+    <div>
+      
+    
+      <p
+        class="red-color"
+      >
+        Styled with scoped CSS
+      </p>
+      
+    
+      <p
+        class="blue-color"
+      >
+        Styled with scoped SCSS
+      </p>
+      
+    
+      <p
+        class="green-color"
+      >
+        Styled with global CSS
+      </p>
+      
+  
+    </div>
+    
+  
+  </storybook-styled-component>
+</storybook-dynamic-app-root>
+`;