Re-implemented autosuggestions component for the compose form

Fix #205, fix #156, fix #124

storybook/config.js

@@ -1,8 +1,14 @@
-import { configure } from '@kadira/storybook';
+import { configure, setAddon } from '@kadira/storybook';
+import IntlAddon from 'react-storybook-addon-intl';
 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 './storybook.css'
+setAddon(IntlAddon);
+addLocaleData(en);
 
 window.storiesOf = storiesOf;
 window.action    = action;
@@ -11,7 +17,7 @@ window.React     = React;
 function loadStories () {
   require('./stories/loading_indicator.story.jsx');
   require('./stories/button.story.jsx');
-  require('./stories/tabs_bar.story.jsx');
+  require('./stories/autosuggest_textarea.story.jsx');
 }
 
 configure(loadStories, module);

storybook/stories/autosuggest_textarea.story.jsx

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

storybook/stories/button.story.jsx

@@ -1,3 +1,4 @@
+import { storiesOf } from '@kadira/storybook';
 import Button from '../../app/assets/javascripts/components/components/button.jsx'
 
 storiesOf('Button', module)

storybook/stories/loading_indicator.story.jsx

@@ -1,6 +1,6 @@
+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', () => (
-    <LoadingIndicator />
-  ));
+  .add('default state', () => <IntlProvider><LoadingIndicator /></IntlProvider>);

storybook/stories/tabs_bar.story.jsx

@@ -1,6 +0,0 @@
-import TabsBar from '../../app/assets/javascripts/components/features/ui/components/tabs_bar.jsx'
-
-storiesOf('TabsBar', module)
-  .add('default state', () => (
-    <TabsBar />
-  ));

storybook/storybook.css

@@ -1,3 +0,0 @@
-#root {
-  padding: 4rem;
-}

storybook/storybook.scss

@@ -0,0 +1,15 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,400italic);
+@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,500);
+
+#root {
+  font-family: '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

@@ -0,0 +1,13 @@
+const path = require('path');
+
+module.exports = {
+  module: {
+    loaders: [
+      {
+        test: /.scss$/,
+        loaders: ["style", "css", "sass"],
+        include: path.resolve(__dirname, '../')
+      }
+    ]
+  }
+}