Merge pull request #171 from input-output-hk/fix/issue-170-fix-broken…

…-storybook

[issue-170] Fix broken storybook after css refactor

.storybook/webpack.config.js

@@ -1,14 +1,6 @@
 const path = require('path');
 const isCi = process.env.CI && process.env.CI !== '';
 
-let themeResource = 'incentivized-testnet';
-const resourcesDir = path.join(__dirname, '..','source/styles/resources');
-const resources = [
-  `${resourcesDir}/mixins/**/*.scss`,
-  `${resourcesDir}/variables-common/**/*.scss`,
-  `${resourcesDir}/variables-themes/variables-theme-${themeResource}.scss`,
-];
-
 module.exports = ({ config, mode }) => {
   config.module.rules.push({
     test: /\.(ts|tsx)$/,
@@ -29,7 +21,6 @@ module.exports = ({ config, mode }) => {
         },
       },
       { loader: 'fast-sass-loader', options: { sourceMap: !isCi } },
-      { loader: 'sass-resources-loader', options: { resources } },
     ],
   });
   config.resolve.extensions.push('.ts', '.tsx');

package.json

@@ -53,7 +53,7 @@
     "mobx": "5.11.0",
     "mobx-localstorage": "2.0.0-alpha.1",
     "mobx-react-lite": "1.4.1",
-    "next": "9.1.7",
+    "next": "9.1.8-canary.16",
     "next-fonts": "0.18.0",
     "next-images": "1.1.2",
     "qrcode.react": "0.9.3",

source/widgets/layout/Header.tsx

@@ -22,10 +22,10 @@ export const Header = observer((props: IHeaderProps) => {
       ? styles.enlargedHeaderContainer
       : styles.shrinkedHeaderContainer;
   const headerContainerStyles = cx([styles.headerContainer, brandTypeStyle]);
-  const indexClassName = !router.pathname.includes('stake-pools')
+  const indexClassName = !router?.pathname.includes('stake-pools')
     ? styles.activeTab
     : '';
-  const stakePoolsClassName = router.pathname.includes('stake-pools')
+  const stakePoolsClassName = router?.pathname.includes('stake-pools')
     ? styles.activeTab
     : '';
   const testnetSubtitle =

source/widgets/layout/Layout.scss

@@ -1,4 +1,4 @@
-@import 'source/styles/global/index';
+@import '../../styles/global/index';
 
 .content {
   min-height: 100vh;

stories/header.stories.tsx

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { BrandType } from '../source/constants';
-import { Header } from '../source/widgets/layout/Header';
+import { Header } from '../source/widgets/layout';
 import { PaddingDecorator } from './support/PaddingDecorator';
 
 storiesOf('Header', module)

stories/support/ThemeDecorator.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { CssVariablesProvider } from '../../source/styles/theme/CssVariablesProvider';
 import PolymorphThemeProvider from '../../source/styles/theme/PolymorphThemeProvider';
 
 import '../../source/styles/global/_fonts.scss';
@@ -15,8 +14,8 @@ interface IProps {
 
 export const ThemeDecorator = ({ children }: IProps) => (
   <PolymorphThemeProvider>
-    <CssVariablesProvider variables={cardanoExplorerTheme}>
+    <div style={cardanoExplorerTheme}>
       <div className={styles.storyContainer}>{children}</div>
-    </CssVariablesProvider>
+    </div>
   </PolymorphThemeProvider>
 );

stories/support/global.scss

@@ -1,5 +1,6 @@
+@import '../../source/styles/mixins/font-face';
+
 $url: '../../source/public/assets/fonts/Proxima-Nova-';
-@import 'source/styles/mixins/font-face';
 @include font-face('ProximaNova', '#{$url}Bold', 800);
 @include font-face('ProximaNova', '#{$url}Semibold', 600);
 @include font-face('ProximaNova', '#{$url}Regular', normal);

yarn.lock

@@ -4611,6 +4611,15 @@ browserslist@4.7.0:
     electron-to-chromium "^1.3.247"
     node-releases "^1.1.29"
 
+browserslist@4.8.3:
+  version "4.8.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.3.tgz#65802fcd77177c878e015f0e3189f2c4f627ba44"
+  integrity sha512-iU43cMMknxG1ClEZ2MDKeonKE1CCrFVkQK2AqO2YWFmvIrx4JWrvQ4w4hQez6EpVI8rHTtqh/ruHHDHSOKxvUg==
+  dependencies:
+    caniuse-lite "^1.0.30001017"
+    electron-to-chromium "^1.3.322"
+    node-releases "^1.1.44"
+
 browserslist@^4.0.0, browserslist@^4.6.0, browserslist@^4.6.4, browserslist@^4.7.2:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.7.2.tgz#1bb984531a476b5d389cedecb195b2cd69fb1348"
@@ -4818,6 +4827,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30000989, can
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001004.tgz#d879b73981b255488316da946c39327d8c00a586"
   integrity sha512-3nfOR4O8Wa2RWoYfJkMtwRVOsK96TQ+eq57wd0iKaEWl8dwG4hKZ/g0MVBfCvysFvMLi9fQGR/DvozMdkEPl3g==
 
+caniuse-lite@^1.0.30001017:
+  version "1.0.30001021"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001021.tgz#e75ed1ef6dbadd580ac7e7720bb16f07b083f254"
+  integrity sha512-wuMhT7/hwkgd8gldgp2jcrUjOU9RXJ4XxGumQeOsUr91l3WwmM68Cpa/ymCnWEDqakwFXhuDQbaKNHXBPgeE9g==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -6539,6 +6553,11 @@ electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.295:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.296.tgz#a1d4322d742317945285d3ba88966561b67f3ac8"
   integrity sha512-s5hv+TSJSVRsxH190De66YHb50pBGTweT9XGWYu/LMR20KX6TsjFzObo36CjVAzM+PUeeKSBRtm/mISlCzeojQ==
 
+electron-to-chromium@^1.3.322:
+  version "1.3.334"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.334.tgz#0588359f4ac5c4185ebacdf5fc7e1937e2c99872"
+  integrity sha512-RcjJhpsVaX0X6ntu/WSBlW9HE9pnCgXS9B8mTUObl1aDxaiOa0Lu+NMveIS5IDC+VELzhM32rFJDCC+AApVwcA==
+
 elegant-spinner@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
@@ -10566,10 +10585,10 @@ next-tick@^1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
-next@9.1.7:
-  version "9.1.7"
-  resolved "https://registry.yarnpkg.com/next/-/next-9.1.7.tgz#d813ab3a21a98aac3713f6c1934a8533b6162eb0"
-  integrity sha512-qG6TsPl7ANuNPFhKq/1Pd4pAf24QCmUAjc0P8qYrSSsbwNIco1KNNXOyZajV/YlqBjBy/fCrZoErKK3zEUVz6w==
+next@9.1.8-canary.16:
+  version "9.1.8-canary.16"
+  resolved "https://registry.yarnpkg.com/next/-/next-9.1.8-canary.16.tgz#a0208245bc9128bcc0beba92cb164f261cf51e44"
+  integrity sha512-jrJKqgbCidzMOexIInRc6EBiucJ31TrPfePhjX6aUCaa7ycRw4bblvCTo0FOlf1ojylINL2TUsyL4wR98uKF4g==
   dependencies:
     "@ampproject/toolbox-optimizer" "1.1.1"
     "@babel/core" "7.7.2"
@@ -10595,6 +10614,7 @@ next@9.1.7:
     babel-plugin-syntax-jsx "6.18.0"
     babel-plugin-transform-define "2.0.0"
     babel-plugin-transform-react-remove-prop-types "0.4.24"
+    browserslist "4.8.3"
     cache-loader "4.1.0"
     chalk "2.4.2"
     ci-info "2.0.0"
@@ -10783,6 +10803,13 @@ node-releases@^1.1.29, node-releases@^1.1.38:
   dependencies:
     semver "^6.3.0"
 
+node-releases@^1.1.44:
+  version "1.1.45"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.45.tgz#4cf7e9175d71b1317f15ffd68ce63bce1d53e9f2"
+  integrity sha512-cXvGSfhITKI8qsV116u2FTzH5EWZJfgG7d4cpqwF8I8+1tWpD6AsvvGRKq2onR0DNj1jfqsjkXZsm14JMS7Cyg==
+  dependencies:
+    semver "^6.3.0"
+
 node-sass@4.10.0:
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.10.0.tgz#dcc2b364c0913630945ccbf7a2bbf1f926effca4"