commit: 1027556614febb096f2186d3c678116b415c0b9b
parent: 3dcb5fa28f13f597d49b5b442f61d12bc2be6152
Author: Yamagishi Kazutoshi <ykzts@desire.sh>
Date: Sat, 13 May 2017 22:55:56 +0900
Fix broken storybook (#3030)
Diffstat:
11 files changed, 83 insertions(+), 70 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -4,10 +4,20 @@ 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')
+ ]
}
-}
+};
