Fix sb build (closes #18) (#19)

* Fix storybook build command

* Bump deps

* Add storybook build step

* Perform storybook build quiet

Co-authored-by: ErickSkrauch <erickskrauch@ely.by>

.eslintignore

@@ -1,4 +1,5 @@
 build
 dll
+storybook-static
 node_modules
 cache

.gitignore

@@ -3,3 +3,4 @@ node_modules
 /dll
 config/*
 !config/template.*
+storybook-static

.gitlab-ci.yml

@@ -174,6 +174,21 @@ Build:
       - source-maps
     expire_in: 1 week
 
+Storybook:
+  stage: build
+  image: $NODE_IMAGE
+  needs:
+    - Yarn
+  extends:
+    - .yarnCache
+  script:
+    - yarn sb:build --quiet
+  artifacts:
+    name: "Storybook for $CI_COMMIT_BRANCH-$CI_COMMIT_SHORT_SHA"
+    paths:
+      - storybook-static
+    expire_in: 1 day
+
 ################
 # Deploy stage #
 ################
@@ -181,6 +196,8 @@ Build:
 .deployJob:
   stage: deploy
   image: $DEPLOY_IMAGE
+  needs:
+    - Build
   before_script:
     - *defineVars
     - *installSentry

.prettierignore

@@ -1,4 +1,5 @@
 build
+storybook-static
 dll
 node_modules
 cache

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

babel.config.js

@@ -14,8 +14,6 @@ module.exports = {
     '@babel/plugin-syntax-dynamic-import',
     '@babel/plugin-proposal-function-bind',
     '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-optional-chaining',
-    '@babel/plugin-proposal-nullish-coalescing-operator',
     [
       '@babel/plugin-transform-runtime',
       {

package.json

@@ -45,7 +45,7 @@
     "build:dll": "node ./packages/scripts/build-dll.js",
     "build:serve": "http-server --proxy https://dev.account.ely.by ./build",
     "sb": "APP_ENV=storybook start-storybook -p 9009 --ci",
-    "build-storybook": "build-storybook"
+    "sb:build": "APP_ENV=storybook build-storybook"
   },
   "husky": {
     "hooks": {
@@ -91,59 +91,58 @@
   },
   "dependencies": {
     "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.12.0",
+    "regenerator-runtime": "^0.13.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.7",
-    "@babel/core": "^7.7.7",
-    "@babel/node": "^7.7.7",
-    "@babel/plugin-proposal-class-properties": "^7.7.4",
-    "@babel/plugin-proposal-decorators": "^7.7.4",
-    "@babel/plugin-proposal-do-expressions": "^7.7.4",
-    "@babel/plugin-proposal-export-default-from": "^7.7.4",
-    "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
-    "@babel/plugin-proposal-function-bind": "^7.7.4",
-    "@babel/plugin-proposal-function-sent": "^7.7.4",
-    "@babel/plugin-proposal-json-strings": "^7.7.4",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.7.4",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
-    "@babel/plugin-proposal-numeric-separator": "^7.7.4",
-    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
-    "@babel/plugin-proposal-pipeline-operator": "^7.7.7",
-    "@babel/plugin-proposal-throw-expressions": "^7.7.4",
-    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-    "@babel/plugin-syntax-import-meta": "^7.7.4",
-    "@babel/plugin-transform-runtime": "^7.7.6",
-    "@babel/preset-env": "^7.7.7",
-    "@babel/preset-react": "^7.7.4",
-    "@babel/preset-typescript": "^7.7.7",
-    "@babel/runtime-corejs3": "^7.7.7",
-    "@storybook/addon-actions": "^5.2.8",
-    "@storybook/addon-links": "^5.2.8",
-    "@storybook/addon-viewport": "^5.2.8",
-    "@storybook/addons": "^5.2.8",
-    "@storybook/react": "^5.2.8",
-    "@types/jest": "^24.0.25",
-    "@typescript-eslint/eslint-plugin": "^2.13.0",
-    "@typescript-eslint/parser": "^2.13.0",
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/node": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-decorators": "^7.8.3",
+    "@babel/plugin-proposal-do-expressions": "^7.8.3",
+    "@babel/plugin-proposal-export-default-from": "^7.8.3",
+    "@babel/plugin-proposal-export-namespace-from": "^7.8.3",
+    "@babel/plugin-proposal-function-bind": "^7.8.3",
+    "@babel/plugin-proposal-function-sent": "^7.8.3",
+    "@babel/plugin-proposal-json-strings": "^7.8.3",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.8.3",
+    "@babel/plugin-proposal-numeric-separator": "^7.8.3",
+    "@babel/plugin-proposal-pipeline-operator": "^7.8.3",
+    "@babel/plugin-proposal-throw-expressions": "^7.8.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-import-meta": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@babel/runtime-corejs3": "^7.8.3",
+    "@storybook/addon-actions": "^5.3.4",
+    "@storybook/addon-links": "^5.3.4",
+    "@storybook/addon-viewport": "^5.3.4",
+    "@storybook/addons": "^5.3.4",
+    "@storybook/react": "^5.3.4",
+    "@types/jest": "^24.9.0",
+    "@typescript-eslint/eslint-plugin": "^2.16.0",
+    "@typescript-eslint/parser": "^2.16.0",
     "babel-loader": "^8.0.0",
-    "babel-plugin-react-intl": "^5.1.13",
-    "core-js": "3.6.1",
+    "babel-plugin-react-intl": "^5.1.16",
+    "core-js": "3.6.4",
     "csp-webpack-plugin": "^2.0.2",
-    "css-loader": "^3.4.0",
+    "css-loader": "^3.4.2",
     "cssnano": "^4.1.10",
     "dotenv": "^8.2.0",
     "eager-imports-webpack-plugin": "^1.0.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.9.0",
-    "eslint-plugin-jsdoc": "^18.6.2",
+    "eslint-plugin-jsdoc": "^20.3.1",
     "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-react": "^7.18.0",
     "exports-loader": "^0.7.0",
     "file-loader": "^5.0.2",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
-    "husky": "^3.1.0",
+    "husky": "^4.0.10",
     "identity-obj-proxy": "^3.0.0",
     "imports-loader": "^0.8.0",
     "jest": "^24.9.0",
@@ -159,13 +158,13 @@
     "prettier": "^1.19.1",
     "raw-loader": "^4.0.0",
     "react-test-renderer": "^16.12.0",
-    "sass-loader": "^8.0.0",
-    "sinon": "^8.0.1",
+    "sass-loader": "^8.0.2",
+    "sinon": "^8.0.4",
     "sitemap-webpack-plugin": "^0.6.0",
     "speed-measure-webpack-plugin": "^1.3.1",
-    "style-loader": "~1.0.0",
+    "style-loader": "~1.1.2",
     "typescript": "^3.7.4",
-    "unexpected": "^11.12.0",
+    "unexpected": "^11.12.1",
     "unexpected-sinon": "^10.5.1",
     "url-loader": "^3.0.0",
     "wait-on": "^3.3.0",

packages/app/package.json

@@ -2,11 +2,11 @@
   "name": "app",
   "version": "1.0.0",
   "dependencies": {
-    "@formatjs/intl-pluralrules": "^1.4.1",
-    "@formatjs/intl-relativetimeformat": "^4.5.4",
+    "@formatjs/intl-pluralrules": "^1.5.0",
+    "@formatjs/intl-relativetimeformat": "^4.5.7",
     "@hot-loader/react-dom": "^16.11.0",
     "@types/react": "^16.9.17",
-    "@types/react-redux": "^7.1.5",
+    "@types/react-redux": "^7.1.6",
     "@types/react-router-dom": "^5.1.3",
     "clsx": "^1.0.4",
     "copy-to-clipboard": "^3.0.8",
@@ -21,7 +21,7 @@
     "react-dom": "^16.12.0",
     "react-helmet-async": "^1.0.4",
     "react-hot-loader": "^4.12.18",
-    "react-intl": "^3.9.3",
+    "react-intl": "^3.11.0",
     "react-motion": "^0.5.0",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
@@ -35,8 +35,8 @@
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
-    "@types/react-helmet": "^5.0.14",
-    "@types/webpack-env": "^1.14.1",
+    "@types/react-helmet": "^5.0.15",
+    "@types/webpack-env": "^1.15.0",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.15.1"
   }

packages/scripts/package.json

@@ -10,7 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@babel/node": "^7.7.7",
+    "@babel/node": "^7.8.3",
     "chalk": "^3.0.0",
     "crowdin-api": "erickskrauch/crowdin-api#add_missed_methods_and_fix_files_uploading",
     "glob": "^7.1.6",

tests-e2e/package.json

@@ -13,6 +13,6 @@
   "private": true,
   "dependencies": {
     "@cypress/webpack-preprocessor": "^4.1.1",
-    "cypress": "^3.8.1"
+    "cypress": "^3.8.2"
   }
 }

webpack.config.js

@@ -231,32 +231,35 @@ if (isAnalyze) {
 }
 
 if (isProduction) {
-  let cssExtractApplied = false;
+  if (!isStorybook) {
+    let cssExtractApplied = false;
 
-  webpackConfig.module.rules.forEach(rule => {
-    if (
-      rule.use &&
-      (rule.use[0] === 'style-loader' || rule.use[0].loader === 'style-loader')
-    ) {
-      // replace `style-loader` with `MiniCssExtractPlugin`
-      rule.use[0] = MiniCssExtractPlugin.loader;
-      cssExtractApplied = true;
+    webpackConfig.module.rules.forEach(rule => {
+      if (
+        rule.use &&
+        (rule.use[0] === 'style-loader' ||
+          rule.use[0].loader === 'style-loader')
+      ) {
+        // replace `style-loader` with `MiniCssExtractPlugin`
+        rule.use[0] = MiniCssExtractPlugin.loader;
+        cssExtractApplied = true;
+      }
+    });
+
+    if (!cssExtractApplied) {
+      throw new Error(
+        'Can not locate style-loader to replace it with mini-css-extract-plugin loader',
+      );
     }
-  });
 
-  if (!cssExtractApplied) {
-    throw new Error(
-      'Can not locate style-loader to replace it with mini-css-extract-plugin loader',
+    webpackConfig.plugins.push(
+      new MiniCssExtractPlugin({
+        filename: '[name].css?[hash]',
+        chunkFilename: '[id].css?[hash]',
+      }),
     );
   }
 
-  webpackConfig.plugins.push(
-    new MiniCssExtractPlugin({
-      filename: '[name].css?[hash]',
-      chunkFilename: '[id].css?[hash]',
-    }),
-  );
-
   webpackConfig.devtool = 'hidden-source-map';
 
   webpackConfig.optimization = {