@@ -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 './storybook.scss' | |||||
import '../app/javascript/styles/application.scss'; | |||||
import './storybook.scss'; | |||||
setAddon(IntlAddon); | setAddon(IntlAddon); | ||||
addLocaleData(en); | 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 () { | function loadStories () { | ||||
req.keys().forEach((filename) => req(filename)) | req.keys().forEach((filename) => req(filename)) | ||||
@@ -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} />) |
@@ -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={[]} />) |
@@ -1,5 +1,6 @@ | |||||
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) | storiesOf('Button', module) | ||||
.add('default state', () => ( | .add('default state', () => ( |
@@ -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} />; | |||||
}); | }); |
@@ -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> | |||||
)); |
@@ -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>); |
@@ -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; | ||||
} | } |
@@ -4,10 +4,20 @@ 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"], | |||||
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') | |||||
] | |||||
} | } | ||||
} | |||||
}; |