Enable storybook

pioneer/.storybook/webpack.config.js

@@ -1,81 +1,47 @@
 const path = require('path')
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 module.exports = ({ config }) => {
+  // Styles (replace the provided rule):
+  const originalCssRuleIndex = config.module.rules.findIndex(rule => rule.test.source.includes('.css'));
+  config.module.rules[originalCssRuleIndex] = {
+    test: /\.(sa|sc|c)ss$/i,
+    use: [
+      // Creates `style` nodes from JS strings
+      'style-loader',
+      // Translates CSS into CommonJS
+      'css-loader',
+      // Compiles Sass to CSS
+      'sass-loader'
+    ]
+  };
 
-// Post CSS loader for sources:
-config.module.rules.push({
-  test: /\.css$/,
-  include: path.resolve(__dirname, '../packages'),
-  exclude: /(node_modules)/,
-  use: [
-    {
-      loader: require.resolve('postcss-loader'),
-      options: {
-        // Set postcss.config.js config path && ctx
-        config: {
-          path: '../postcss.config.js',
-        },
-        ident: 'postcss',
-        plugins: () => [
-          require('precss'),
-          require('autoprefixer'),
-          require('postcss-simple-vars'),
-          require('postcss-nested'),
-          require('postcss-import'),
-          require('postcss-clean')(),
-          require('postcss-flexbugs-fixes')
-        ]
-      }
-    }
-  ]
-});
+  // TypeScript loader (via Babel to match polkadot/apps)
+  config.module.rules.push({
+    test: /\.(js|ts|tsx)$/,
+    exclude: /(node_modules)/,
+    use: [
+      {
+        loader: require.resolve('babel-loader'),
+        options: require('@polkadot/dev/config/babel')
+      },
+    ],
+  });
+  config.resolve.extensions.push('.js', '.ts', '.tsx');
 
-// TypeScript loader (via Babel to match polkadot/apps)
-config.module.rules.push({
-  test: /\.(js|ts|tsx)$/,
-  exclude: /(node_modules)/,
-  use: [
-    {
-      loader: require.resolve('babel-loader'),
-      options: require('@polkadot/dev/config/babel')
-    },
-  ],
-});
-config.resolve.extensions.push('.js', '.ts', '.tsx');
+  // TSConfig, uses the same file as packages
+  config.resolve.plugins = config.resolve.plugins || [];
+  config.resolve.plugins.push(
+    new TsconfigPathsPlugin({
+      configFile: path.resolve(__dirname, '../tsconfig.json'),
+    })
+  );
 
-// TSConfig, uses the same file as packages
-config.resolve.plugins = config.resolve.plugins || [];
-config.resolve.plugins.push(
-  new TsconfigPathsPlugin({
-    configFile: path.resolve(__dirname, '../tsconfig.json'),
-  })
-);
+  // Stories parser
+  config.module.rules.push({
+      test: /\.stories\.tsx?$/,
+      loaders: [require.resolve('@storybook/source-loader')],
+      enforce: 'pre',
+  });
 
-// Stories parser
-config.module.rules.push({
-    test: /\.stories\.tsx?$/,
-    loaders: [require.resolve('@storybook/source-loader')],
-    enforce: 'pre',
-});
-
-// CSS preprocessors
-config.module.rules.push(
-    {
-        test: /\.s[ac]ss$/i,
-        use: [
-            // Creates `style` nodes from JS strings
-            'style-loader',
-            // Translates CSS into CommonJS
-            'css-loader',
-            // Compiles Sass to CSS
-            'sass-loader',
-        ],
-    },
-    {
-        test: /\.less$/,
-        loaders: [ 'style-loader', 'css-loader', 'less-loader' ]
-    }
-);
-
-return config;
+  return config;
 };

pioneer/packages/joy-media/src/mocks/PublicationStatus.mock.ts

@@ -6,7 +6,7 @@ function newEntity (value: string): PublicationStatusType {
 }
 
 export const PublicationStatus = {
-  Publiс: newEntity('Publiс'),
+  Publiс: newEntity('Public'),
   Unlisted: newEntity('Unlisted')
 };
 

pioneer/packages/joy-media/src/stories/ExploreContent.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import '../common/index.scss';
 
-import { ExploreContent } from '../explore/ExploreContent';
+import ExploreContent from '../explore/ExploreContent.view';
 import { withMockTransport } from './withMockTransport';
 
 export default {

pioneer/packages/joy-media/src/stories/UploadAudio.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { EditForm } from '../upload/UploadAudio';
-import '../index.css';
+import '../index.scss';
 
 import { ContentId } from '@joystream/types/media';
 import { UploadAudioView } from '../upload/UploadAudio.view';

pioneer/packages/joy-media/src/stories/UploadVideo.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { EditForm } from '../upload/UploadVideo';
-import '../index.css';
+import '../index.scss';
 
 import { ContentId } from '@joystream/types/media';
 import { withMockTransport } from './withMockTransport';

pioneer/packages/joy-proposals/src/stories/ProposalDetails.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import '../index.css';
+import withMock from './withMock';
 
 import MockProposalDetails from './data/ProposalDetails.mock';
 import { ProposalDetails } from '../Proposal';
@@ -8,18 +8,18 @@ export default {
   title: 'Proposals | Details'
 };
 
-export const HasToVote = () => <ProposalDetails {...MockProposalDetails} />;
+export const HasToVote = withMock(() => <ProposalDetails {...MockProposalDetails} />);
 
-export const VotedApproved = () => (
+export const VotedApproved = withMock(() => (
   <ProposalDetails {...MockProposalDetails} vote={{ hasVoted: true, value: 'Approve' }} />
-);
+));
 
-export const VotedAbstain = () => (
+export const VotedAbstain = withMock(() => (
   <ProposalDetails {...MockProposalDetails} vote={{ hasVoted: true, value: 'Abstain' }} />
-);
+));
 
-export const VotedReject = () => (
+export const VotedReject = withMock(() => (
   <ProposalDetails {...MockProposalDetails} vote={{ hasVoted: true, value: 'Reject' }} />
-);
+));
 
-export const VotedSlash = () => <ProposalDetails {...MockProposalDetails} vote={{ hasVoted: true, value: 'Slash' }} />;
+export const VotedSlash = withMock(() => <ProposalDetails {...MockProposalDetails} vote={{ hasVoted: true, value: 'Slash' }} />);

pioneer/packages/joy-proposals/src/stories/ProposalForms.stories.tsx

@@ -1,4 +1,3 @@
-import '../index.css';
 import { SignalForm,
   SpendingProposalForm,
   SetCouncilParamsForm,

pioneer/packages/joy-proposals/src/stories/ProposalPreview.stories.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import '../index.css';
-
 import MockProposalPreview from './data/ProposalPreview.mock';
 import { ProposalPreview } from '../Proposal';
+import withMock from './withMock';
 
 export default {
   title: 'Proposals | Preview'
 };
 
-export const Default = () => <ProposalPreview {...MockProposalPreview} />;
+export const Default = withMock(() => <ProposalPreview {...MockProposalPreview} />);

pioneer/packages/joy-proposals/src/stories/ProposalPreviewList.stories.tsx

@@ -1,4 +1,3 @@
-import '../index.css';
 import { ProposalPreviewList } from '../Proposal';
 import withMock from './withMock';
 

pioneer/packages/joy-proposals/src/stories/ProposalTypes.stories.tsx

@@ -1,4 +1,3 @@
-import '../index.css';
 import { ChooseProposalType } from '../Proposal';
 import withMock from './withMock';
 

pioneer/packages/joy-proposals/src/stories/withMock.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { createMemoryHistory, createLocation } from 'history';
 import { match, RouteComponentProps } from 'react-router';
+import style from '../style';
+import styled from 'styled-components';
+
+const StyledContainer = styled.div`${style}`;
 
 const history = createMemoryHistory();
 const path = '/';
@@ -20,5 +24,9 @@ const MockRouteProps: RouteComponentProps = {
 
 export default function withMock (Component: React.ComponentType<any>) {
   // TODO: Use mock transport
-  return <Component {...MockRouteProps} />;
+  return (
+    <StyledContainer>
+      <Component {...MockRouteProps} />
+    </StyledContainer>
+  );
 }

pioneer/packages/joy-roles/src/tabs.stories.tsx

@@ -3,7 +3,7 @@ import { withKnobs } from '@storybook/addon-knobs';
 import { Container, Tab } from 'semantic-ui-react';
 import { ContentCuratorsSection } from './tabs/WorkingGroup.stories';
 import { OpportunitySandbox } from './tabs/Opportunities.stories';
-import { ApplicationSandbox } from './flows/apply.stories';
+// import { ApplicationSandbox } from './flows/apply.stories';
 import { MyRolesSandbox } from './tabs/MyRoles.stories';
 
 export default {
@@ -38,4 +38,4 @@ export const RolesPage = () => {
   );
 };
 
-export const ApplicationLightbox = ApplicationSandbox;
+// export const ApplicationLightbox = ApplicationSandbox;

pioneer/postcss.config.js

@@ -1 +0,0 @@
-module.exports = require('@polkadot/dev-react/config/postcss');