From 1027556614febb096f2186d3c678116b415c0b9b Mon Sep 17 00:00:00 2001
From: Yamagishi Kazutoshi <ykzts@desire.sh>
Date: Sat, 13 May 2017 22:55:56 +0900
Subject: Fix broken storybook (#3030)

---
 storybook/config.js                              | 10 +++-------
 storybook/stories/autosuggest_textarea.story.js  | 17 +++++++++++++++++
 storybook/stories/autosuggest_textarea.story.jsx |  6 ------
 storybook/stories/button.story.js                | 17 +++++++++++++++++
 storybook/stories/button.story.jsx               | 16 ----------------
 storybook/stories/character_counter.story.js     | 21 +++++++++++++++++++++
 storybook/stories/character_counter.story.jsx    | 20 --------------------
 storybook/stories/loading_indicator.story.js     | 12 ++++++++++++
 storybook/stories/loading_indicator.story.jsx    |  6 ------
 storybook/storybook.scss                         | 12 ------------
 storybook/webpack.config.js                      | 16 +++++++++++++---
 11 files changed, 83 insertions(+), 70 deletions(-)
 create mode 100644 storybook/stories/autosuggest_textarea.story.js
 delete mode 100644 storybook/stories/autosuggest_textarea.story.jsx
 create mode 100644 storybook/stories/button.story.js
 delete mode 100644 storybook/stories/button.story.jsx
 create mode 100644 storybook/stories/character_counter.story.js
 delete mode 100644 storybook/stories/character_counter.story.jsx
 create mode 100644 storybook/stories/loading_indicator.story.js
 delete mode 100644 storybook/stories/loading_indicator.story.jsx

(limited to 'storybook')

diff --git a/storybook/config.js b/storybook/config.js
index 976b83af0..2684a738c 100644
--- a/storybook/config.js
+++ b/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))
diff --git a/storybook/stories/autosuggest_textarea.story.js b/storybook/stories/autosuggest_textarea.story.js
new file mode 100644
index 000000000..3f13aa416
--- /dev/null
+++ b/storybook/stories/autosuggest_textarea.story.js
@@ -0,0 +1,17 @@
+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} />)
diff --git a/storybook/stories/autosuggest_textarea.story.jsx b/storybook/stories/autosuggest_textarea.story.jsx
deleted file mode 100644
index 72a4b525d..000000000
--- a/storybook/stories/autosuggest_textarea.story.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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={[]} />)
diff --git a/storybook/stories/button.story.js b/storybook/stories/button.story.js
new file mode 100644
index 000000000..3fd45cb82
--- /dev/null
+++ b/storybook/stories/button.story.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { action, storiesOf } from '@kadira/storybook';
+import Button from 'mastodon/components/button';
+
+storiesOf('Button', module)
+  .add('default state', () => (
+    <Button text="submit" onClick={action('clicked')} />
+  ))
+  .add('secondary', () => (
+    <Button secondary text="submit" onClick={action('clicked')} />
+  ))
+  .add('disabled', () => (
+    <Button disabled text="submit" onClick={action('clicked')} />
+  ))
+  .add('block', () => (
+    <Button block text="submit" onClick={action('clicked')} />
+  ));
diff --git a/storybook/stories/button.story.jsx b/storybook/stories/button.story.jsx
deleted file mode 100644
index fc392abef..000000000
--- a/storybook/stories/button.story.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { storiesOf } from '@kadira/storybook';
-import Button from '../../app/assets/javascripts/components/components/button.jsx'
-
-storiesOf('Button', module)
-  .add('default state', () => (
-    <Button text="submit" onClick={action('clicked')} />
-  ))
-  .add('secondary', () => (
-    <Button secondary text="submit" onClick={action('clicked')} />
-  ))
-  .add('disabled', () => (
-    <Button disabled text="submit" onClick={action('clicked')} />
-  ))
-  .add('block', () => (
-    <Button block text="submit" onClick={action('clicked')} />
-  ));
diff --git a/storybook/stories/character_counter.story.js b/storybook/stories/character_counter.story.js
new file mode 100644
index 000000000..eb6eae7d8
--- /dev/null
+++ b/storybook/stories/character_counter.story.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import CharacterCounter from 'mastodon/features/compose/components/character_counter';
+
+storiesOf('CharacterCounter', module)
+  .add('no text', () => {
+    const text = '';
+    return <CharacterCounter text={text} max={500} />;
+  })
+  .add('a few strings text', () => {
+    const text = '0123456789';
+    return <CharacterCounter text={text} max={500} />;
+  })
+  .add('the same text', () => {
+    const text = '01234567890123456789';
+    return <CharacterCounter text={text} max={20} />;
+  })
+  .add('over text', () => {
+    const text = '01234567890123456789012345678901234567890123456789';
+    return <CharacterCounter text={text} max={10} />;
+  });
diff --git a/storybook/stories/character_counter.story.jsx b/storybook/stories/character_counter.story.jsx
deleted file mode 100644
index 931d8a037..000000000
--- a/storybook/stories/character_counter.story.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { storiesOf } from '@kadira/storybook';
-import CharacterCounter from '../../app/assets/javascripts/components/features/compose/components/character_counter';
-
-storiesOf('CharacterCounter', module)
-  .add('no text', () => {
-    const text = '';
-    return <CharacterCounter text={text} max="500" />;
-  })
-  .add('a few strings text', () => {
-    const text = '0123456789';
-    return <CharacterCounter text={text} max="500" />;
-  })
-  .add('the same text', () => {
-    const text = '01234567890123456789';
-    return <CharacterCounter text={text} max="20" />;
-  })
-  .add('over text', () => {
-    const text = '01234567890123456789012345678901234567890123456789';
-    return <CharacterCounter text={text} max="10" />;
-  });
diff --git a/storybook/stories/loading_indicator.story.js b/storybook/stories/loading_indicator.story.js
new file mode 100644
index 000000000..f3e67e89c
--- /dev/null
+++ b/storybook/stories/loading_indicator.story.js
@@ -0,0 +1,12 @@
+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>
+  ));
diff --git a/storybook/stories/loading_indicator.story.jsx b/storybook/stories/loading_indicator.story.jsx
deleted file mode 100644
index f4a961c4e..000000000
--- a/storybook/stories/loading_indicator.story.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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>);
diff --git a/storybook/storybook.scss b/storybook/storybook.scss
index 6058d658b..3bda9e64c 100644
--- a/storybook/storybook.scss
+++ b/storybook/storybook.scss
@@ -1,15 +1,3 @@
-@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;
 }
diff --git a/storybook/webpack.config.js b/storybook/webpack.config.js
index 0ce563e1a..dbcfa3c17 100644
--- a/storybook/webpack.config.js
+++ b/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')
+    ]
   }
-}
+};
-- 
cgit