Fix broken storybook (#3030)

storybook/config.js

@@ -4,17 +4,13 @@ import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 import { addLocaleData } from 'react-intl';
 import en from 'react-intl/locale-data/en';
-import '../app/assets/stylesheets/components.scss'
-import './storybook.scss'
+import '../app/javascript/styles/application.scss';
+import './storybook.scss';
 
 setAddon(IntlAddon);
 addLocaleData(en);
 
-window.storiesOf = storiesOf;
-window.action    = action;
-window.React     = React;
-
-let req = require.context('./stories/', true, /.story.jsx$/);
+let req = require.context('./stories/', true, /.story.js$/);
 
 function loadStories () {
   req.keys().forEach((filename) => req(filename))

storybook/stories/autosuggest_textarea.story.js

+import React from 'react';
+import { List } from 'immutable'
+import { action, storiesOf } from '@kadira/storybook';
+import AutosuggestTextarea from 'mastodon/components/autosuggest_textarea'
+
+const props = {
+  onChange: action('changed'),
+  onPaste: action('pasted'),
+  onSuggestionSelected: action('suggestionsSelected'),
+  onSuggestionsClearRequested: action('suggestionsClearRequested'),
+  onSuggestionsFetchRequested: action('suggestionsFetchRequested'),
+  suggestions: List([])
+}
+
+storiesOf('AutosuggestTextarea', module)
+  .add('default state', () => <AutosuggestTextarea value='' {...props} />)
+  .add('with text', () => <AutosuggestTextarea value='Hello' {...props} />)

storybook/stories/autosuggest_textarea.story.jsx

-import { storiesOf } from '@kadira/storybook';
-import AutosuggestTextarea from '../../app/assets/javascripts/components/components/autosuggest_textarea.jsx'
-
-storiesOf('AutosuggestTextarea', module)
-  .add('default state', () => <AutosuggestTextarea value='' suggestions={[]} />)
-  .add('with text', () => <AutosuggestTextarea value='Hello' suggestions={[]} />)

storybook/stories/button.story.jsx → storybook/stories/button.story.js

-import { storiesOf } from '@kadira/storybook';
-import Button from '../../app/assets/javascripts/components/components/button.jsx'
+import React from 'react';
+import { action, storiesOf } from '@kadira/storybook';
+import Button from 'mastodon/components/button';
 
 storiesOf('Button', module)
   .add('default state', () => (

storybook/stories/character_counter.story.jsx → storybook/stories/character_counter.story.js

+import React from 'react';
 import { storiesOf } from '@kadira/storybook';
-import CharacterCounter from '../../app/assets/javascripts/components/features/compose/components/character_counter';
+import CharacterCounter from 'mastodon/features/compose/components/character_counter';
 
 storiesOf('CharacterCounter', module)
   .add('no text', () => {
     const text = '';
-    return <CharacterCounter text={text} max="500" />;
+    return <CharacterCounter text={text} max={500} />;
   })
   .add('a few strings text', () => {
     const text = '0123456789';
-    return <CharacterCounter text={text} max="500" />;
+    return <CharacterCounter text={text} max={500} />;
   })
   .add('the same text', () => {
     const text = '01234567890123456789';
-    return <CharacterCounter text={text} max="20" />;
+    return <CharacterCounter text={text} max={20} />;
   })
   .add('over text', () => {
     const text = '01234567890123456789012345678901234567890123456789';
-    return <CharacterCounter text={text} max="10" />;
+    return <CharacterCounter text={text} max={10} />;
   });

storybook/stories/loading_indicator.story.js

+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { storiesOf } from '@kadira/storybook';
+import getMessagesForLocale from 'mastodon/locales';
+import LoadingIndicator from 'mastodon/components/loading_indicator';
+
+storiesOf('LoadingIndicator', module)
+  .add('default state', () => (
+    <IntlProvider locale='en' messages={getMessagesForLocale('en')}>
+      <LoadingIndicator />
+    </IntlProvider>
+  ));

storybook/stories/loading_indicator.story.jsx

-import { storiesOf } from '@kadira/storybook';
-import LoadingIndicator from '../../app/assets/javascripts/components/components/loading_indicator.jsx'
-import { IntlProvider } from 'react-intl';
-
-storiesOf('LoadingIndicator', module)
-  .add('default state', () => <IntlProvider><LoadingIndicator /></IntlProvider>);

storybook/storybook.scss

-@import "../app/assets/stylesheets/fonts/roboto";
-@import "../app/assets/stylesheets/fonts/roboto-mono";
-
 #root {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: #282c37;
-  font-size: 13px;
-  line-height: 18px;
-  font-weight: 400;
-  color: #fff;
-  padding-bottom: 140px;
-  text-rendering: optimizelegibility;
-  font-feature-settings: "kern";
   padding: 4rem;
 }

storybook/webpack.config.js

@@ -3,11 +3,21 @@ const path = require('path');
 module.exports = {
   module: {
     loaders: [
+      {
+        test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
+        loader: 'url-loader'
+      },
       {
         test: /.scss$/,
-        loaders: ["style", "css", "sass"],
-        include: path.resolve(__dirname, '../')
+        loaders: ["style-loader", "css-loader", "postcss-loader", "sass-loader"]
       }
     ]
+  },
+  resolve: {
+    modulesDirectories: [
+      path.resolve(__dirname, '..', 'storybook'),
+      path.resolve(__dirname, '..', 'app', 'javascript'),
+      path.resolve(__dirname, '..', 'node_modules')
+    ]
   }
-}
+};