Fix broken storybook (#3030)

This commit is contained in:
Yamagishi Kazutoshi 2017-05-13 22:55:56 +09:00 committed by Eugen Rochko
parent 3dcb5fa28f
commit 1027556614
9 changed files with 54 additions and 41 deletions

View File

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

View File

@ -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} />)

View File

@ -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={[]} />)

View File

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

View File

@ -1,20 +1,21 @@
import React from 'react';
import { storiesOf } from '@kadira/storybook'; 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) storiesOf('CharacterCounter', module)
.add('no text', () => { .add('no text', () => {
const text = ''; const text = '';
return <CharacterCounter text={text} max="500" />; return <CharacterCounter text={text} max={500} />;
}) })
.add('a few strings text', () => { .add('a few strings text', () => {
const text = '0123456789'; const text = '0123456789';
return <CharacterCounter text={text} max="500" />; return <CharacterCounter text={text} max={500} />;
}) })
.add('the same text', () => { .add('the same text', () => {
const text = '01234567890123456789'; const text = '01234567890123456789';
return <CharacterCounter text={text} max="20" />; return <CharacterCounter text={text} max={20} />;
}) })
.add('over text', () => { .add('over text', () => {
const text = '01234567890123456789012345678901234567890123456789'; const text = '01234567890123456789012345678901234567890123456789';
return <CharacterCounter text={text} max="10" />; return <CharacterCounter text={text} max={10} />;
}); });

View File

@ -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>
));

View File

@ -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>);

View File

@ -1,15 +1,3 @@
@import "../app/assets/stylesheets/fonts/roboto";
@import "../app/assets/stylesheets/fonts/roboto-mono";
#root { #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; padding: 4rem;
} }

View File

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