From 1027556614febb096f2186d3c678116b415c0b9b Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Sat, 13 May 2017 22:55:56 +0900 Subject: [PATCH] Fix broken storybook (#3030) --- storybook/config.js | 10 +++------- storybook/stories/autosuggest_textarea.story.js | 17 +++++++++++++++++ .../stories/autosuggest_textarea.story.jsx | 6 ------ .../{button.story.jsx => button.story.js} | 5 +++-- ...ter.story.jsx => character_counter.story.js} | 11 ++++++----- storybook/stories/loading_indicator.story.js | 12 ++++++++++++ storybook/stories/loading_indicator.story.jsx | 6 ------ storybook/storybook.scss | 12 ------------ storybook/webpack.config.js | 16 +++++++++++++--- 9 files changed, 54 insertions(+), 41 deletions(-) create mode 100644 storybook/stories/autosuggest_textarea.story.js delete mode 100644 storybook/stories/autosuggest_textarea.story.jsx rename storybook/stories/{button.story.jsx => button.story.js} (75%) rename storybook/stories/{character_counter.story.jsx => character_counter.story.js} (53%) create mode 100644 storybook/stories/loading_indicator.story.js delete mode 100644 storybook/stories/loading_indicator.story.jsx 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', () => ) + .add('with text', () => ) 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', () => ) - .add('with text', () => ) diff --git a/storybook/stories/button.story.jsx b/storybook/stories/button.story.js similarity index 75% rename from storybook/stories/button.story.jsx rename to storybook/stories/button.story.js index fc392abef..3fd45cb82 100644 --- a/storybook/stories/button.story.jsx +++ b/storybook/stories/button.story.js @@ -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) .add('default state', () => ( diff --git a/storybook/stories/character_counter.story.jsx b/storybook/stories/character_counter.story.js similarity index 53% rename from storybook/stories/character_counter.story.jsx rename to storybook/stories/character_counter.story.js index 931d8a037..eb6eae7d8 100644 --- a/storybook/stories/character_counter.story.jsx +++ b/storybook/stories/character_counter.story.js @@ -1,20 +1,21 @@ +import React from 'react'; 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) .add('no text', () => { const text = ''; - return ; + return ; }) .add('a few strings text', () => { const text = '0123456789'; - return ; + return ; }) .add('the same text', () => { const text = '01234567890123456789'; - return ; + return ; }) .add('over text', () => { const text = '01234567890123456789012345678901234567890123456789'; - return ; + return ; }); 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', () => ( + + + + )); 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', () => ); 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') + ] } -} +};