Add OnboadingModal story (#3578)

3 files changed, 49 insertions, 1 deletions

diff --git a/package.json b/package.json
index a5d3aed04..da8471605 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "build:production": "NODE_ENV=production yarn webpack -- --config config/webpack/production.js",
     "manage:translations": "node ./config/webpack/translationRunner.js",
     "start": "rimraf ./tmp/streaming && babel ./streaming/index.js --out-dir ./tmp && node ./tmp/streaming/index.js",
-    "storybook": "NODE_ENV=test start-storybook -p 9001 -c storybook",
+    "storybook": "NODE_ENV=test start-storybook -s ./public -p 9001 -c storybook",
     "test": "npm run test:lint && npm run test:mocha",
     "test:lint": "eslint -c .eslintrc.yml --ext=js app/javascript/ config/webpack/ spec/javascript/ storyboard/ streaming/",
     "test:mocha": "NODE_ENV=test mocha --require ./spec/javascript/setup.js --compilers js:babel-register ./spec/javascript/components/*.test.js",
diff --git a/storybook/initial_state.js b/storybook/initial_state.js
new file mode 100644
index 000000000..3872586f6
--- /dev/null
+++ b/storybook/initial_state.js
@@ -0,0 +1,24 @@
+export default {
+  meta: {
+    admin: 1,
+    domain: 'example.com',
+    me: 2,
+  },
+  accounts: {
+    1: {
+      acct: 'admin',
+      avatar: '/avatars/original/missing.png',
+      id: 1,
+      url: 'https://example.com/@admin',
+    },
+    2: {
+      acct: 'user',
+      avatar: '/avatars/original/missing.png',
+      id: 1,
+      url: 'https://example.com/@user',
+    },
+  },
+  media_attachments: {
+    accept_content_types: [],
+  },
+};
diff --git a/storybook/stories/onboarding_modal.story.js b/storybook/stories/onboarding_modal.story.js
new file mode 100644
index 000000000..91727bdb2
--- /dev/null
+++ b/storybook/stories/onboarding_modal.story.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { IntlProvider } from 'react-intl';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import en from 'mastodon/locales/en.json';
+import configureStore from 'mastodon/store/configureStore';
+import { hydrateStore } from 'mastodon/actions/store';
+import OnboadingModal from 'mastodon/features/ui/components/onboarding_modal';
+import initialState from '../initial_state';
+
+const store = configureStore();
+store.dispatch(hydrateStore(initialState));
+
+storiesOf('OnboadingModal', module)
+  .add('default state', () => (
+    <IntlProvider locale='en' messages={en}>
+      <Provider store={store}>
+        <div style={{ position: 'absolute' }}>
+          <OnboadingModal onClose={action('close')} />
+        </div>
+      </Provider>
+    </IntlProvider>
+  ));