From 5c3c1be0914d383f8bbe070d18c48628317bf877 Mon Sep 17 00:00:00 2001
From: Mihir Samdarshi <msamdars@stanford.edu>
Date: Mon, 22 Apr 2024 22:41:12 -0700
Subject: [PATCH] feat: update storybook config

---
 .gitignore                                    |  2 +
 .storybook/addons.js                          |  2 -
 .storybook/config.js                          | 15 -----
 .storybook/main.js                            | 16 +++++
 package.json                                  | 17 ++---
 .../__test__/analysisHomePage.stories.jsx     | 66 +++++++++++++------
 .../__test__/announcementsPage.stories.jsx    | 37 ++++++-----
 src/Auth/__test__/authLoading.stories.jsx     |  9 ++-
 src/ContactPage/__test__/contact.stories.jsx  | 37 ++++++-----
 src/Dashboard/__test__/dashboard.stories.jsx  | 62 +++++++++--------
 .../__test__/dataAccessPage.stories.jsx       | 31 +++++----
 src/DataAccess/__test__/response.stories.jsx  | 47 ++++++++-----
 src/ErrorPage/__test__/error.stories.jsx      | 35 +++++-----
 .../__test__/landingPage.stories.jsx          | 33 ++++++----
 .../__test__/linkoutPage.stories.jsx          | 33 ++++++----
 src/MethodsPage/__test__/methods.stories.jsx  | 43 ++++++------
 src/Navbar/__test__/navbar.stories.jsx        | 26 +++++---
 .../__test__/releaseEntry.stories.jsx         | 32 +++++----
 .../__test__/releasePage.stories.jsx          | 62 ++++++++++-------
 .../__test__/quickSearchBox.stories.jsx       | 32 +++++----
 .../sampleSearchResultable.stories.jsx        | 24 ++++---
 src/Search/__test__/searchForm.stories.jsx    | 29 +++++---
 src/Search/__test__/searchPage.stories.jsx    | 64 ++++++++++--------
 .../__test__/searchResultFilters.stories.jsx  | 26 ++++----
 src/Search/__test__/searchResults.stories.jsx | 40 +++++++----
 .../__test__/searchTermList.stories.jsx       | 36 ++++++----
 src/Search/__test__/searchTermRow.stories.jsx | 45 ++++++++-----
 src/Sidebar/__test__/sidebar.stories.jsx      | 46 +++++++++----
 .../__test__/teamMemberCard.stories.jsx       | 22 +++++--
 src/TeamPage/__test__/teamPage.stories.jsx    | 33 ++++++----
 30 files changed, 613 insertions(+), 389 deletions(-)
 delete mode 100644 .storybook/addons.js
 delete mode 100644 .storybook/config.js
 create mode 100644 .storybook/main.js

diff --git a/.gitignore b/.gitignore
index 677f507c..a7b32c51 100644
--- a/.gitignore
+++ b/.gitignore
@@ -145,3 +145,5 @@ src/__snapshots__/*
 # Build files
 build/
 
+.yarnrc.yml
+.yarn
diff --git a/.storybook/addons.js b/.storybook/addons.js
deleted file mode 100644
index 6aed412d..00000000
--- a/.storybook/addons.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
diff --git a/.storybook/config.js b/.storybook/config.js
deleted file mode 100644
index 2ef1004e..00000000
--- a/.storybook/config.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { configure, addDecorator } from '@storybook/react';
-import '../src/main.css';
-import StoryRouter from 'storybook-react-router';
-
-require('bootstrap');
-
-// FIXES ISSUE WITH REACT-ROUTER AND STORYBOOK INTEGRATION
-addDecorator(StoryRouter());
-
-const req = require.context('../src', true, /.stories.jsx$/);
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
diff --git a/.storybook/main.js b/.storybook/main.js
new file mode 100644
index 00000000..db647c23
--- /dev/null
+++ b/.storybook/main.js
@@ -0,0 +1,16 @@
+/**
+ *
+ * @type {import('@storybook/react-vite').StorybookConfig}
+ */
+module.exports = {
+  framework: {
+    name: "@storybook/react-vite",
+  },
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+
+  docs: {
+    autodocs: true
+  },
+
+  addons: ['storybook-addon-remix-react-router', '@storybook/addon-actions', "@storybook/addon-links"]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 860e1c04..897aab01 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "name": "MoTrPAC",
   "version": "2.0.4",
   "type": "module",
+  "packageManager": "yarn@4.1.1",
   "private": true,
   "dependencies": {
     "auth0-js": "9.26.0",
@@ -44,8 +45,8 @@
     "build": "vite build",
     "serve": "vite preview",
     "test": "react-scripts test",
-    "storybook": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public",
+    "storybook": "storybook dev -p 9009",
+    "build-storybook": "storybook build",
     "sass-lint": "stylelint --config=stylelint.config.js '**/*.scss'",
     "format": "prettier --write \"**/*.+(js|jsx|json|css|md)\"",
     "inspect-branch": "yarn && yarn sass && yarn start"
@@ -57,11 +58,10 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@storybook/addon-actions": "8.0.10",
-    "@storybook/addon-links": "8.0.10",
-    "@storybook/addons": "7.6.17",
-    "@storybook/preset-create-react-app": "8.0.10",
-    "@storybook/react": "8.0.10",
+    "@storybook/addon-actions": "^8.0.9",
+    "@storybook/addon-links": "^8.0.9",
+    "@storybook/react": "^8.0.9",
+    "@storybook/react-vite": "^8.0.9",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "@vitest/coverage-v8": "^1.4.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
@@ -74,7 +74,8 @@
     "prettier": "^3.0.0",
     "react-error-overlay": "^6.0.11",
     "sass": "1.70.0",
-    "storybook-react-router": "1.0.8",
+    "storybook": "^8.0.9",
+    "storybook-addon-remix-react-router": "^3.0.0",
     "stylelint": "^16.2.0",
     "stylelint-config-recommended": "^14.0.0",
     "vitest": "^1.4.0"
diff --git a/src/AnalysisPage/__test__/analysisHomePage.stories.jsx b/src/AnalysisPage/__test__/analysisHomePage.stories.jsx
index cefd2ec8..0a8a3d79 100644
--- a/src/AnalysisPage/__test__/analysisHomePage.stories.jsx
+++ b/src/AnalysisPage/__test__/analysisHomePage.stories.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import configureStore from '../../App/configureStore';
 import { AnalysisHomePage } from '../analysisHomePage';
 import { Navbar } from '../../Navbar/navbar';
-import { Footer } from '../../Footer/footer';
+import Footer from '../../Footer/footer';
 import { Sidebar } from '../../Sidebar/sidebar';
 import { defaultAnalysisState } from '../analysisReducer';
 
@@ -44,25 +43,50 @@ const depth1StateAnimal = {
   currentAnalysis: 'PHENOTYPE',
   currentAnalysisTitle: 'Phenotypic Data',
 };
-storiesOf('Analysis Page', module)
-  .addDecorator((story) => (
-    <Provider store={store}>
-      <div className="App">
-        <header>
-          <Navbar isAuthenticated {...navbarAction} profile={testUser} />
-        </header>
-        <div className="componentHolder">
-          <div className="container-fluid">
-            <div className="row mt-5 pt-1">
-              <Sidebar isAuthenticated profile={testUser} {...sidebarActions} />
-              {story()}
+
+export default {
+  title: 'Analysis Page',
+
+  decorators: [
+    (story) => (
+      <Provider store={store}>
+        <div className="App">
+          <header>
+            <Navbar isAuthenticated {...navbarAction} profile={testUser} />
+          </header>
+          <div className="componentHolder">
+            <div className="container-fluid">
+              <div className="row mt-5 pt-1">
+                <Sidebar
+                  isAuthenticated
+                  profile={testUser}
+                  {...sidebarActions}
+                />
+                {story()}
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <Footer isAuthenticated profile={testUser} />
-    </Provider>
-  ))
-  .add('Animal', () => <AnalysisHomePage {...defaultAnalysisState} match={animalMatch} {...AnalysisActions} />)
-  .add('Animal Depth 1', () => <AnalysisHomePage {...depth1StateAnimal} {...AnalysisActions} />)
-  .add('Human', () => <AnalysisHomePage {...defaultAnalysisState} match={humanMatch} {...AnalysisActions} />);
+        <Footer isAuthenticated profile={testUser} />
+      </Provider>
+    ),
+  ],
+};
+
+export const Animal = () => (
+  <AnalysisHomePage
+    {...defaultAnalysisState}
+    match={animalMatch}
+    {...AnalysisActions}
+  />
+);
+export const AnimalDepth1 = () => (
+  <AnalysisHomePage {...depth1StateAnimal} {...AnalysisActions} />
+);
+export const Human = () => (
+  <AnalysisHomePage
+    {...defaultAnalysisState}
+    match={humanMatch}
+    {...AnalysisActions}
+  />
+);
diff --git a/src/AnnouncementsPage/__test__/announcementsPage.stories.jsx b/src/AnnouncementsPage/__test__/announcementsPage.stories.jsx
index 18e5badd..c9d43cf8 100644
--- a/src/AnnouncementsPage/__test__/announcementsPage.stories.jsx
+++ b/src/AnnouncementsPage/__test__/announcementsPage.stories.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { AnnouncementsPage } from '../announcementsPage';
+import AnnouncementsPage from '../announcementsPage';
 import { Navbar } from '../../Navbar/navbar';
-import { Footer } from '../../Footer/footer';
+import Footer from '../../Footer/footer';
 
 const navbarAction = {
   login: action('logging in'),
@@ -14,16 +13,22 @@ const footerAction = {
   login: action('logging in'),
 };
 
-storiesOf('Announcements Page', module)
-  .addDecorator((story) => (
-    <>
-      <div className="App">
-        <header>
-          <Navbar {...navbarAction} />
-        </header>
-        <div className="row justify-content-center mt-5 pt-4">{story()}</div>
-      </div>
-      <Footer {...footerAction} />
-    </>
-  ))
-  .add('Default', () => <AnnouncementsPage />);
+export default {
+  title: 'Announcements Page',
+
+  decorators: [
+    (story) => (
+      <>
+        <div className="App">
+          <header>
+            <Navbar {...navbarAction} />
+          </header>
+          <div className="row justify-content-center mt-5 pt-4">{story()}</div>
+        </div>
+        <Footer {...footerAction} />
+      </>
+    ),
+  ],
+};
+
+export const Default = () => <AnnouncementsPage />;
diff --git a/src/Auth/__test__/authLoading.stories.jsx b/src/Auth/__test__/authLoading.stories.jsx
index ffff998c..93e833df 100644
--- a/src/Auth/__test__/authLoading.stories.jsx
+++ b/src/Auth/__test__/authLoading.stories.jsx
@@ -1,10 +1,13 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { AuthLoading } from '../authLoading';
 
 const authActions = {
   authSuccess: action('Authorized!'),
 };
-storiesOf('Authentication Loading', module)
-  .add('Default', () => <AuthLoading authenticating {...authActions} />);
+
+export default {
+  title: 'Authentication Loading',
+};
+
+export const Default = () => <AuthLoading authenticating {...authActions} />;
diff --git a/src/ContactPage/__test__/contact.stories.jsx b/src/ContactPage/__test__/contact.stories.jsx
index b6f26ac2..6c304f19 100644
--- a/src/ContactPage/__test__/contact.stories.jsx
+++ b/src/ContactPage/__test__/contact.stories.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { Contact } from '../contact';
+import Contact from '../contact';
 import { Navbar } from '../../Navbar/navbar';
-import { Footer } from '../../Footer/footer';
+import Footer from '../../Footer/footer';
 
 const navbarAction = {
   login: action('logging in'),
@@ -14,18 +13,22 @@ const footerAction = {
   login: action('logging in'),
 };
 
-storiesOf('Contact Us Page', module)
-  .addDecorator(story => (
-    <React.Fragment>
-      <div className="App">
-        <header>
-        <Navbar {...navbarAction} />
-        </header>
-        <div className="row justify-content-center mt-5 pt-4">
-          {story()}
+export default {
+  title: 'Contact Us Page',
+
+  decorators: [
+    (story) => (
+      <React.Fragment>
+        <div className="App">
+          <header>
+            <Navbar {...navbarAction} />
+          </header>
+          <div className="row justify-content-center mt-5 pt-4">{story()}</div>
         </div>
-      </div>
-      <Footer {...footerAction} />
-    </React.Fragment>
-  ))
-  .add('Default', () => <Contact />);
+        <Footer {...footerAction} />
+      </React.Fragment>
+    ),
+  ],
+};
+
+export const Default = () => <Contact />;
diff --git a/src/Dashboard/__test__/dashboard.stories.jsx b/src/Dashboard/__test__/dashboard.stories.jsx
index b9798658..a131ef46 100644
--- a/src/Dashboard/__test__/dashboard.stories.jsx
+++ b/src/Dashboard/__test__/dashboard.stories.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Dashboard } from '../dashboard';
 import { Navbar } from '../../Navbar/navbar';
-import { Footer } from '../../Footer/footer';
+import Footer from '../../Footer/footer';
 import { Sidebar } from '../../Sidebar/sidebar';
 
 import internalUser from '../../testData/testUser';
@@ -63,30 +62,41 @@ const sidebarActions = {
   toggleSidebar: action('toggling sidebar'),
 };
 
-storiesOf('Dashboard', module)
-  .addDecorator((story) => (
-    <div className="App">
-      <header>
-        <Navbar isAuthenticated {...navbarAction} profile={internalUser} />
-      </header>
-      <div className="componentHolder">
-        <div className="container-fluid">
-          <div className="row mt-5 pt-1">
-            <Sidebar
-              isAuthenticated
-              profile={internalUser}
-              {...sidebarActions}
-            />
-            {story()}
+export default {
+  title: 'Dashboard',
+
+  decorators: [
+    (story) => (
+      <div className="App">
+        <header>
+          <Navbar isAuthenticated {...navbarAction} profile={internalUser} />
+        </header>
+        <div className="componentHolder">
+          <div className="container-fluid">
+            <div className="row mt-5 pt-1">
+              <Sidebar
+                isAuthenticated
+                profile={internalUser}
+                {...sidebarActions}
+              />
+              {story()}
+            </div>
           </div>
         </div>
+        <Footer isAuthenticated profile={internalUser} {...footerAction} />
       </div>
-      <Footer isAuthenticated profile={internalUser} {...footerAction} />
-    </div>
-  ))
-  .add('Internal user view', () => (
-    <Dashboard {...internalLoggedInState} {...defaultActions} />
-  ))
-  .add('External user view', () => (
-    <Dashboard {...externalLoggedInState} {...defaultActions} />
-  ));
+    ),
+  ],
+};
+
+export const InternalUserView = {
+  render: () => <Dashboard {...internalLoggedInState} {...defaultActions} />,
+
+  name: 'Internal user view',
+};
+
+export const ExternalUserView = {
+  render: () => <Dashboard {...externalLoggedInState} {...defaultActions} />,
+
+  name: 'External user view',
+};
diff --git a/src/DataAccess/__test__/dataAccessPage.stories.jsx b/src/DataAccess/__test__/dataAccessPage.stories.jsx
index 54187b43..a65c113c 100644
--- a/src/DataAccess/__test__/dataAccessPage.stories.jsx
+++ b/src/DataAccess/__test__/dataAccessPage.stories.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { DataAccessPage } from '../dataAccessPage';
 import { Navbar } from '../../Navbar/navbar';
-import { Footer } from '../../Footer/footer';
+import Footer from '../../Footer/footer';
 
 const navbarActions = {
   login: action('logging in'),
@@ -14,16 +13,20 @@ const footerActions = {
   login: action('logging in'),
 };
 
-storiesOf('Data Access Page', module)
-  .addDecorator(story => (
-    <div className="App">
-      <header>
-        <Navbar {...navbarActions} />
-      </header>
-      <div className="row justify-content-center mt-5 pt-4">
-        {story()}
+export default {
+  title: 'Data Access Page',
+
+  decorators: [
+    (story) => (
+      <div className="App">
+        <header>
+          <Navbar {...navbarActions} />
+        </header>
+        <div className="row justify-content-center mt-5 pt-4">{story()}</div>
+        <Footer {...footerActions} />
       </div>
-      <Footer {...footerActions} />
-    </div>
-  ))
-  .add('Default', () => <DataAccessPage />);
+    ),
+  ],
+};
+
+export const Default = () => <DataAccessPage />;
diff --git a/src/DataAccess/__test__/response.stories.jsx b/src/DataAccess/__test__/response.stories.jsx
index 759c3519..4ecedda8 100644
--- a/src/DataAccess/__test__/response.stories.jsx
+++ b/src/DataAccess/__test__/response.stories.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import RegistrationResponse from '../response';
 import { Navbar } from '../../Navbar/navbar';
-import { Footer } from '../../Footer/footer';
+import Footer from '../../Footer/footer';
 
 const navbarActions = {
   login: action('logging in'),
@@ -14,21 +13,33 @@ const footerActions = {
   login: action('logging in'),
 };
 
-storiesOf('New User Registration Response', module)
-  .addDecorator(story => (
-    <React.Fragment>
-      <div className="App">
-        <header>
-          <Navbar {...navbarActions} />
-        </header>
-        <div className="justify-content-center dataAccessPage">
-          <div className="container mt-5 pt-4">
-            {story()}
+export default {
+  title: 'New User Registration Response',
+
+  decorators: [
+    (story) => (
+      <React.Fragment>
+        <div className="App">
+          <header>
+            <Navbar {...navbarActions} />
+          </header>
+          <div className="justify-content-center dataAccessPage">
+            <div className="container mt-5 pt-4">{story()}</div>
           </div>
         </div>
-      </div>
-      <Footer {...footerActions} />
-    </React.Fragment>
-  ))
-  .add('Registration success', () => <RegistrationResponse status="success" />)
-  .add('Registration error', () => <RegistrationResponse status="error" />);
+        <Footer {...footerActions} />
+      </React.Fragment>
+    ),
+  ],
+};
+
+export const RegistrationSuccess = {
+  render: () => <RegistrationResponse status="success" />,
+
+  name: 'Registration success',
+};
+
+export const RegistrationError = {
+  render: () => <RegistrationResponse status="error" />,
+  name: 'Registration error',
+};
diff --git a/src/ErrorPage/__test__/error.stories.jsx b/src/ErrorPage/__test__/error.stories.jsx
index 030fa84d..0c5c50d7 100644
--- a/src/ErrorPage/__test__/error.stories.jsx
+++ b/src/ErrorPage/__test__/error.stories.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { ErrorPage } from '../error';
 import { Navbar } from '../../Navbar/navbar';
-import { Footer } from '../../Footer/footer';
+import Footer from '../../Footer/footer';
 
 import testUser from '../../testData/testUser';
 
@@ -11,18 +10,22 @@ const loginAction = {
   login: action('logging in'),
 };
 
-storiesOf('Error Page', module)
-  .addDecorator(story => (
-    <>
-      <div className="App">
-        <header>
-          <Navbar {...loginAction} />
-        </header>
-        <div className="row justify-content-center mt-5">
-          {story()}
+export default {
+  title: 'Error Page',
+
+  decorators: [
+    (story) => (
+      <>
+        <div className="App">
+          <header>
+            <Navbar {...loginAction} />
+          </header>
+          <div className="row justify-content-center mt-5">{story()}</div>
         </div>
-      </div>
-      <Footer {...loginAction} />
-    </>
-  ))
-  .add('Default', () => <ErrorPage />);
+        <Footer {...loginAction} />
+      </>
+    ),
+  ],
+};
+
+export const Default = () => <ErrorPage />;
diff --git a/src/LandingPage/__test__/landingPage.stories.jsx b/src/LandingPage/__test__/landingPage.stories.jsx
index 58a810db..937bbfe3 100644
--- a/src/LandingPage/__test__/landingPage.stories.jsx
+++ b/src/LandingPage/__test__/landingPage.stories.jsx
@@ -1,26 +1,31 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { LandingPage } from '../landingPage';
 import { Navbar } from '../../Navbar/navbar';
-import { Footer } from '../../Footer/footer';
+import Footer from '../../Footer/footer';
 
 const footerActions = {
   login: action('logging in'),
   logout: action('logging out'),
 };
 
-storiesOf('Landing Page', module)
-  .addDecorator(story => (
-    <div className="App">
-      <header>
-        <Navbar />
-      </header>
-      <div className="componentHolder mt-5 pt-2">
-        {story()}
+export default {
+  title: 'Landing Page',
+
+  decorators: [
+    (story) => (
+      <div className="App">
+        <header>
+          <Navbar />
+        </header>
+        <div className="componentHolder mt-5 pt-2">{story()}</div>
+        <Footer {...footerActions} />
       </div>
-      <Footer {...footerActions} />
-    </div>
+    ),
+  ],
+};
 
-  ))
-  .add('default', () => <LandingPage />);
+export const Default = {
+  render: () => <LandingPage />,
+  name: 'default',
+};
diff --git a/src/LinkoutPage/__test__/linkoutPage.stories.jsx b/src/LinkoutPage/__test__/linkoutPage.stories.jsx
index b2a00473..a65aa43b 100644
--- a/src/LinkoutPage/__test__/linkoutPage.stories.jsx
+++ b/src/LinkoutPage/__test__/linkoutPage.stories.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { LinkoutPage } from '../linkoutPage';
+import LinkoutPage from '../linkoutPage';
 import { Navbar } from '../../Navbar/navbar';
-import { Footer } from '../../Footer/footer';
+import Footer from '../../Footer/footer';
 
 const navbarAction = {
   login: action('logging in'),
@@ -14,14 +13,20 @@ const footerAction = {
   login: action('logging in'),
 };
 
-storiesOf('Linkout Page', module)
-  .addDecorator((story) => (
-    <div className="App">
-      <header>
-        <Navbar {...navbarAction} />
-      </header>
-      <div className="row justify-content-center mt-5 pt-4">{story()}</div>
-      <Footer {...footerAction} />
-    </div>
-  ))
-  .add('Default', () => <LinkoutPage />);
+export default {
+  title: 'Linkout Page',
+
+  decorators: [
+    (story) => (
+      <div className="App">
+        <header>
+          <Navbar {...navbarAction} />
+        </header>
+        <div className="row justify-content-center mt-5 pt-4">{story()}</div>
+        <Footer {...footerAction} />
+      </div>
+    ),
+  ],
+};
+
+export const Default = () => <LinkoutPage />;
diff --git a/src/MethodsPage/__test__/methods.stories.jsx b/src/MethodsPage/__test__/methods.stories.jsx
index 39f0c7f5..bf356640 100644
--- a/src/MethodsPage/__test__/methods.stories.jsx
+++ b/src/MethodsPage/__test__/methods.stories.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Methods } from '../methods';
 import { Navbar } from '../../Navbar/navbar';
-import { Footer } from '../../Footer/footer';
+import Footer from '../../Footer/footer';
 import { Sidebar } from '../../Sidebar/sidebar';
 
 import testUser from '../../testData/testUser';
@@ -27,23 +26,29 @@ const sidebarActions = {
   toggleSidebar: action('toggling sidebar'),
 };
 
-storiesOf('Methods Page', module)
-  .addDecorator((story) => (
-    <div className="App">
-      <header>
-        <Navbar isAuthenticated {...navbarAction} profile={testUser} />
-      </header>
-      <div className="componentHolder">
-        <div className="container-fluid">
-          <div className="row mt-5 pt-1">
-            <Sidebar isAuthenticated profile={testUser} {...sidebarActions} />
-            {story()}
+export default {
+  title: 'Methods Page',
+
+  decorators: [
+    (story) => (
+      <div className="App">
+        <header>
+          <Navbar isAuthenticated {...navbarAction} profile={testUser} />
+        </header>
+        <div className="componentHolder">
+          <div className="container-fluid">
+            <div className="row mt-5 pt-1">
+              <Sidebar isAuthenticated profile={testUser} {...sidebarActions} />
+              {story()}
+            </div>
           </div>
         </div>
+        <div className="mt-auto">
+          <Footer isAuthenticated {...footerAction} profile={testUser} />
+        </div>
       </div>
-      <div className="mt-auto">
-        <Footer isAuthenticated {...footerAction} profile={testUser} />
-      </div>
-    </div>
-  ))
-  .add('Default', () => <Methods {...loggedInState} />);
+    ),
+  ],
+};
+
+export const Default = () => <Methods {...loggedInState} />;
diff --git a/src/Navbar/__test__/navbar.stories.jsx b/src/Navbar/__test__/navbar.stories.jsx
index 0ee1b950..e66fb79b 100644
--- a/src/Navbar/__test__/navbar.stories.jsx
+++ b/src/Navbar/__test__/navbar.stories.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Navbar } from '../navbar';
 
@@ -38,11 +37,20 @@ const actions = {
   getSearchForm: action('Go to advanced search page'),
 };
 
-storiesOf('Navbar', module)
-  .add('Default', () => <Navbar {...loggedOutState} />)
-  .add('Internal user logged-in', () => (
-    <Navbar {...internalLoggedInState} {...actions} />
-  ))
-  .add('External user logged-in', () => (
-    <Navbar {...externalLoggedInState} {...actions} />
-  ));
+export default {
+  title: 'Navbar',
+};
+
+export const Default = () => <Navbar {...loggedOutState} />;
+
+export const InternalUserLoggedIn = {
+  render: () => <Navbar {...internalLoggedInState} {...actions} />,
+
+  name: 'Internal user logged-in',
+};
+
+export const ExternalUserLoggedIn = {
+  render: () => <Navbar {...externalLoggedInState} {...actions} />,
+
+  name: 'External user logged-in',
+};
diff --git a/src/ReleasePage/__test__/releaseEntry.stories.jsx b/src/ReleasePage/__test__/releaseEntry.stories.jsx
index 5e513887..67d98acd 100644
--- a/src/ReleasePage/__test__/releaseEntry.stories.jsx
+++ b/src/ReleasePage/__test__/releaseEntry.stories.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import ReleaseEntry from '../releaseEntry';
 
 import internalUser from '../../testData/testUser';
@@ -25,15 +24,22 @@ const externalLoggedInState = {
   profile: externalUser,
 };
 
-storiesOf('Release Entry', module)
-  .addDecorator(story => (
-    <div className="dataReleasePage container-fluid">
-      {story()}
-    </div>
-  ))
-  .add('Internal user view', () => (
-    <ReleaseEntry {...internalLoggedInState} />
-  ))
-  .add('External user view', () => (
-    <ReleaseEntry {...externalLoggedInState} />
-  ));
+export default {
+  title: 'Release Entry',
+
+  decorators: [
+    (story) => <div className="dataReleasePage container-fluid">{story()}</div>,
+  ],
+};
+
+export const InternalUserView = {
+  render: () => <ReleaseEntry {...internalLoggedInState} />,
+
+  name: 'Internal user view',
+};
+
+export const ExternalUserView = {
+  render: () => <ReleaseEntry {...externalLoggedInState} />,
+
+  name: 'External user view',
+};
diff --git a/src/ReleasePage/__test__/releasePage.stories.jsx b/src/ReleasePage/__test__/releasePage.stories.jsx
index 11d507bd..9ae8540f 100644
--- a/src/ReleasePage/__test__/releasePage.stories.jsx
+++ b/src/ReleasePage/__test__/releasePage.stories.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { ReleasePage } from '../releasePage';
 import { Navbar } from '../../Navbar/navbar';
-import { Footer } from '../../Footer/footer';
+import Footer from '../../Footer/footer';
 import { Sidebar } from '../../Sidebar/sidebar';
 
 import internalUser from '../../testData/testUser';
@@ -42,28 +41,43 @@ const sidebarActions = {
   resetDepth: action('resetting depth'),
 };
 
-storiesOf('Release Page', module)
-  .addDecorator(story => (
-    <div className="App">
-      <header>
-        <Navbar isAuthenticated {...navbarAction} profile={internalUser} />
-      </header>
-      <div className="componentHolder">
-        <div className="container-fluid">
-          <div className="row mt-5 pt-1">
-            <Sidebar isAuthenticated profile={internalUser} {...sidebarActions} />
-            {story()}
+export default {
+  title: 'Release Page',
+
+  decorators: [
+    (story) => (
+      <div className="App">
+        <header>
+          <Navbar isAuthenticated {...navbarAction} profile={internalUser} />
+        </header>
+        <div className="componentHolder">
+          <div className="container-fluid">
+            <div className="row mt-5 pt-1">
+              <Sidebar
+                isAuthenticated
+                profile={internalUser}
+                {...sidebarActions}
+              />
+              {story()}
+            </div>
           </div>
         </div>
+        <div className="mt-auto">
+          <Footer isAuthenticated {...footerAction} profile={internalUser} />
+        </div>
       </div>
-      <div className="mt-auto">
-        <Footer isAuthenticated {...footerAction} profile={internalUser} />
-      </div>
-    </div>
-  ))
-  .add('Internal user view', () => (
-    <ReleasePage {...internalLoggedInState} />
-  ))
-  .add('External user view', () => (
-    <ReleasePage {...externalLoggedInState} />
-  ));
+    ),
+  ],
+};
+
+export const InternalUserView = {
+  render: () => <ReleasePage {...internalLoggedInState} />,
+
+  name: 'Internal user view',
+};
+
+export const ExternalUserView = {
+  render: () => <ReleasePage {...externalLoggedInState} />,
+
+  name: 'External user view',
+};
diff --git a/src/Search/__test__/quickSearchBox.stories.jsx b/src/Search/__test__/quickSearchBox.stories.jsx
index 86b852d9..bc88d3ff 100644
--- a/src/Search/__test__/quickSearchBox.stories.jsx
+++ b/src/Search/__test__/quickSearchBox.stories.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import QuickSearchBox from '../quickSearchBox';
 import { defaultQuickSearchState } from '../quickSearchBoxReducer';
@@ -20,15 +19,22 @@ const actions = {
   getSearchForm: action('Go to advanced search page'),
 };
 
-storiesOf('Quick Search Box', module)
-  .addDecorator(story => (
-    <div className="quick-search-component container d-flex justify-content-end">
-      {story()}
-    </div>
-  ))
-  .add('Default', () => (
-    <QuickSearchBox {...defaultState} {...actions} />
-  ))
-  .add('Input value changed', () => (
-    <QuickSearchBox {...changedState} {...actions} />
-  ));
+export default {
+  title: 'Quick Search Box',
+
+  decorators: [
+    (story) => (
+      <div className="quick-search-component container d-flex justify-content-end">
+        {story()}
+      </div>
+    ),
+  ],
+};
+
+export const Default = () => <QuickSearchBox {...defaultState} {...actions} />;
+
+export const InputValueChanged = {
+  render: () => <QuickSearchBox {...changedState} {...actions} />,
+
+  name: 'Input value changed',
+};
diff --git a/src/Search/__test__/sampleSearchResultable.stories.jsx b/src/Search/__test__/sampleSearchResultable.stories.jsx
index 3f0474be..e63393dc 100644
--- a/src/Search/__test__/sampleSearchResultable.stories.jsx
+++ b/src/Search/__test__/sampleSearchResultable.stories.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import SampleSearchResultTable from '../sampleSearchResultTable';
 
 const urlSearchParamsObj = {
@@ -11,13 +10,18 @@ const urlSearchParamsObj = {
   site: 'MSSM',
 };
 
-storiesOf('Sample Results Table', module)
-  // Padding added to indicate it is a component
-  .addDecorator((story) => (
-    <div className="searchPage container-fluid">
-      <div className="advanced-search-form-container">
-        {story()}
+export default {
+  title: 'Sample Results Table',
+
+  decorators: [
+    (story) => (
+      <div className="searchPage container-fluid">
+        <div className="advanced-search-form-container">{story()}</div>
       </div>
-    </div>
-  ))
-  .add('Default', () => <SampleSearchResultTable params={urlSearchParamsObj} />);
+    ),
+  ],
+};
+
+export const Default = () => (
+  <SampleSearchResultTable params={urlSearchParamsObj} />
+);
diff --git a/src/Search/__test__/searchForm.stories.jsx b/src/Search/__test__/searchForm.stories.jsx
index 454cc1f8..533d6dde 100644
--- a/src/Search/__test__/searchForm.stories.jsx
+++ b/src/Search/__test__/searchForm.stories.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import SearchForm from '../searchForm';
 import { defaultSearchState } from '../searchReducer';
@@ -58,10 +57,24 @@ const actions = {
   resetSearchForm: action('Advanced search form reset'),
 };
 
-storiesOf('Search Form', module)
-  .addDecorator(story => (
-    <div className="searchPage container-fluid">{story()}</div>
-  ))
-  .add('Default', () => <SearchForm {...defaultState} {...actions} />)
-  .add('Multiple term/value pairs', () => <SearchForm {...multiTermState} {...actions} />)
-  .add('Form field values changed', () => <SearchForm {...changedState} {...actions} />);
+export default {
+  title: 'Search Form',
+
+  decorators: [
+    (story) => <div className="searchPage container-fluid">{story()}</div>,
+  ],
+};
+
+export const Default = () => <SearchForm {...defaultState} {...actions} />;
+
+export const MultipleTermValuePairs = {
+  render: () => <SearchForm {...multiTermState} {...actions} />,
+
+  name: 'Multiple term/value pairs',
+};
+
+export const FormFieldValuesChanged = {
+  render: () => <SearchForm {...changedState} {...actions} />,
+
+  name: 'Form field values changed',
+};
diff --git a/src/Search/__test__/searchPage.stories.jsx b/src/Search/__test__/searchPage.stories.jsx
index c0a577bb..7375f089 100644
--- a/src/Search/__test__/searchPage.stories.jsx
+++ b/src/Search/__test__/searchPage.stories.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { SearchPage } from '../searchPage';
 import { Navbar } from '../../Navbar/navbar';
-import { Footer } from '../../Footer/footer';
+import Footer from '../../Footer/footer';
 import { Sidebar } from '../../Sidebar/sidebar';
 import { defaultSearchState } from '../searchReducer';
 
@@ -77,32 +76,41 @@ const sidebarActions = {
   resetDepth: action('resetting depth'),
 };
 
-// Provider necessary to link data from components of UploadScreen
-storiesOf('Search Page', module)
-  .addDecorator(story => (
-    <div className="App">
-      <header>
-        <Navbar isAuthenticated {...navbarAction} profile={testUser} />
-      </header>
-      <div className="componentHolder">
-        <div className="container-fluid">
-          <div className="row">
-            <Sidebar isAuthenticated profile={testUser} {...sidebarActions} />
-            {story()}
+export default {
+  title: 'Search Page',
+
+  decorators: [
+    (story) => (
+      <div className="App">
+        <header>
+          <Navbar isAuthenticated {...navbarAction} profile={testUser} />
+        </header>
+        <div className="componentHolder">
+          <div className="container-fluid">
+            <div className="row">
+              <Sidebar isAuthenticated profile={testUser} {...sidebarActions} />
+              {story()}
+            </div>
           </div>
         </div>
+        <div className="mt-auto">
+          <Footer isAuthenticated {...footerAction} profile={testUser} />
+        </div>
       </div>
-      <div className="mt-auto">
-        <Footer isAuthenticated {...footerAction} profile={testUser} />
-      </div>
-    </div>
-  ))
-  .add('Default', () => (
-    <SearchPage {...defaultState} {...actions} />
-  ))
-  .add('Multiple term/value pairs', () => (
-    <SearchPage {...multiTermState} {...actions} />
-  ))
-  .add('Form field values changed', () => (
-    <SearchPage {...changedState} {...actions} />
-  ));
+    ),
+  ],
+};
+
+export const Default = () => <SearchPage {...defaultState} {...actions} />;
+
+export const MultipleTermValuePairs = {
+  render: () => <SearchPage {...multiTermState} {...actions} />,
+
+  name: 'Multiple term/value pairs',
+};
+
+export const FormFieldValuesChanged = {
+  render: () => <SearchPage {...changedState} {...actions} />,
+
+  name: 'Form field values changed',
+};
diff --git a/src/Search/__test__/searchResultFilters.stories.jsx b/src/Search/__test__/searchResultFilters.stories.jsx
index ba7fd7b8..19be8497 100644
--- a/src/Search/__test__/searchResultFilters.stories.jsx
+++ b/src/Search/__test__/searchResultFilters.stories.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import SearchResultFilters from '../searchResultFilters';
 
 import stanfordPass1aRNAseqMetadata from '../../data/stanford_pass1a_get_rna_seq_metadata';
@@ -13,15 +12,20 @@ stanfordPass1aRNAseqMetadata.forEach((entry) => {
   }
 });
 
-storiesOf('Search Result Filters', module)
-  // Padding added to indicate it is a component
-  .addDecorator((story) => (
-    <div className="searchPage container-fluid">
-      <div className="d-flex search-results-container">
-        <div className="col-12 col-md-3 search-result-filters-container">
-          {story()}
+export default {
+  title: 'Search Result Filters',
+
+  decorators: [
+    (story) => (
+      <div className="searchPage container-fluid">
+        <div className="d-flex search-results-container">
+          <div className="col-12 col-md-3 search-result-filters-container">
+            {story()}
+          </div>
         </div>
       </div>
-    </div>
-  ))
-  .add('Default', () => <SearchResultFilters results={searchResutls} />);
+    ),
+  ],
+};
+
+export const Default = () => <SearchResultFilters results={searchResutls} />;
diff --git a/src/Search/__test__/searchResults.stories.jsx b/src/Search/__test__/searchResults.stories.jsx
index 0ba0649c..558a1e80 100644
--- a/src/Search/__test__/searchResults.stories.jsx
+++ b/src/Search/__test__/searchResults.stories.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import SearchResults from '../searchResults';
 
 import stanfordPass1aRNAseqMetadata from '../../data/stanford_pass1a_get_rna_seq_metadata';
@@ -28,14 +27,33 @@ stanfordPass1aRNAseqMetadata.forEach((entry) => {
   }
 });
 
-storiesOf('Search Results', module)
-  // Padding added to indicate it is a component
-  .addDecorator((story) => (
-    <div className="searchPage container-fluid">
-      <div className="advanced-search-form-container">
-        {story()}
+export default {
+  title: 'Search Results',
+
+  decorators: [
+    (story) => (
+      <div className="searchPage container-fluid">
+        <div className="advanced-search-form-container">{story()}</div>
       </div>
-    </div>
-  ))
-  .add('Show advanced search results', () => <SearchResults advSearchParams={params} lunrResutls={searchResutls} />)
-  .add('Show sample results table', () => <SearchResults urlSearchParamsObj={urlSearchParamsObj} advSearchParams={params} />);
+    ),
+  ],
+};
+
+export const ShowAdvancedSearchResults = {
+  render: () => (
+    <SearchResults advSearchParams={params} lunrResutls={searchResutls} />
+  ),
+
+  name: 'Show advanced search results',
+};
+
+export const ShowSampleResultsTable = {
+  render: () => (
+    <SearchResults
+      urlSearchParamsObj={urlSearchParamsObj}
+      advSearchParams={params}
+    />
+  ),
+
+  name: 'Show sample results table',
+};
diff --git a/src/Search/__test__/searchTermList.stories.jsx b/src/Search/__test__/searchTermList.stories.jsx
index 5ccc0b2e..5366f0fc 100644
--- a/src/Search/__test__/searchTermList.stories.jsx
+++ b/src/Search/__test__/searchTermList.stories.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import SearchTermList from '../searchTermList';
 import { defaultSearchState } from '../searchReducer';
@@ -56,15 +55,28 @@ const actions = {
   removeSearchParam: action('Advanced search form term/value pair removed'),
 };
 
-storiesOf('Search Term List', module)
-  // Padding added to indicate it is a component
-  .addDecorator(story => (
-    <div className="searchPage container-fluid">
-      <div className="advanced-search-form-container">
-        {story()}
+export default {
+  title: 'Search Term List',
+
+  decorators: [
+    (story) => (
+      <div className="searchPage container-fluid">
+        <div className="advanced-search-form-container">{story()}</div>
       </div>
-    </div>
-  ))
-  .add('Default', () => <SearchTermList {...defaultState} {...actions} />)
-  .add('Multiple term/value pairs', () => <SearchTermList {...multiTermState} {...actions} />)
-  .add('Form field values changed', () => <SearchTermList {...changedState} {...actions} />);
+    ),
+  ],
+};
+
+export const Default = () => <SearchTermList {...defaultState} {...actions} />;
+
+export const MultipleTermValuePairs = {
+  render: () => <SearchTermList {...multiTermState} {...actions} />,
+
+  name: 'Multiple term/value pairs',
+};
+
+export const FormFieldValuesChanged = {
+  render: () => <SearchTermList {...changedState} {...actions} />,
+
+  name: 'Form field values changed',
+};
diff --git a/src/Search/__test__/searchTermRow.stories.jsx b/src/Search/__test__/searchTermRow.stories.jsx
index bf3454cc..be60c1b3 100644
--- a/src/Search/__test__/searchTermRow.stories.jsx
+++ b/src/Search/__test__/searchTermRow.stories.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import SearchTermRow from '../searchTermRow';
 
@@ -75,18 +74,34 @@ const actions = {
   removeSearchParam: action('Advanced search form term/value pair removed'),
 };
 
-storiesOf('Serach Term Item', module)
-  .addDecorator(story => (
-    <div className="searchPage container-fluid">
-      <div className="advanced-search-form-container">
-        <ul className="param-list">
-          <li className="param-item form-group d-flex align-items-center justify-content-start">
-            {story()}
-          </li>
-        </ul>
+export default {
+  title: 'Serach Term Item',
+
+  decorators: [
+    (story) => (
+      <div className="searchPage container-fluid">
+        <div className="advanced-search-form-container">
+          <ul className="param-list">
+            <li className="param-item form-group d-flex align-items-center justify-content-start">
+              {story()}
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
-  ))
-  .add('Default', () => <SearchTermRow {...defaultState} {...actions} />)
-  .add('New term/value pair', () => <SearchTermRow {...newTermState} {...actions} />)
-  .add('Form field values changed', () => <SearchTermRow {...changedState} {...actions} />);
+    ),
+  ],
+};
+
+export const Default = () => <SearchTermRow {...defaultState} {...actions} />;
+
+export const NewTermValuePair = {
+  render: () => <SearchTermRow {...newTermState} {...actions} />,
+
+  name: 'New term/value pair',
+};
+
+export const FormFieldValuesChanged = {
+  render: () => <SearchTermRow {...changedState} {...actions} />,
+
+  name: 'Form field values changed',
+};
diff --git a/src/Sidebar/__test__/sidebar.stories.jsx b/src/Sidebar/__test__/sidebar.stories.jsx
index da9fd750..ee1980ff 100644
--- a/src/Sidebar/__test__/sidebar.stories.jsx
+++ b/src/Sidebar/__test__/sidebar.stories.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Sidebar } from '../sidebar';
 
-import internalUser  from '../../testData/testUser';
+import internalUser from '../../testData/testUser';
 
 const externalUser = {
   ...internalUser,
@@ -44,17 +43,36 @@ const sidebarActions = {
   toggleSidebar: action('toggling sidebar'),
 };
 
-storiesOf('Sidebar', module)
-  .add('Default', () => <Sidebar profile={internalUser} />)
-  .add('Internal user logged-in', () => (
-    <Sidebar {...internalLoggedInState} {...sidebarActions} />
-  ))
-  .add('Internal user logged-in with sidebar expanded', () => (
+export default {
+  title: 'Sidebar',
+};
+
+export const Default = () => <Sidebar profile={internalUser} />;
+
+export const InternalUserLoggedIn = {
+  render: () => <Sidebar {...internalLoggedInState} {...sidebarActions} />,
+
+  name: 'Internal user logged-in',
+};
+
+export const InternalUserLoggedInWithSidebarExpanded = {
+  render: () => (
     <Sidebar {...internalLoggedInStateExpanded} {...sidebarActions} />
-  ))
-  .add('External user logged-in', () => (
-    <Sidebar {...externalLoggedInState} {...sidebarActions} />
-  ))
-  .add('External user logged-in with sidebar expanded', () => (
+  ),
+
+  name: 'Internal user logged-in with sidebar expanded',
+};
+
+export const ExternalUserLoggedIn = {
+  render: () => <Sidebar {...externalLoggedInState} {...sidebarActions} />,
+
+  name: 'External user logged-in',
+};
+
+export const ExternalUserLoggedInWithSidebarExpanded = {
+  render: () => (
     <Sidebar {...externalLoggedInStateExpanded} {...sidebarActions} />
-  ));
+  ),
+
+  name: 'External user logged-in with sidebar expanded',
+};
diff --git a/src/TeamPage/__test__/teamMemberCard.stories.jsx b/src/TeamPage/__test__/teamMemberCard.stories.jsx
index 8328ad39..f4747864 100644
--- a/src/TeamPage/__test__/teamMemberCard.stories.jsx
+++ b/src/TeamPage/__test__/teamMemberCard.stories.jsx
@@ -1,10 +1,24 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import TeamMemberCard from '../teamMemberCard';
 import teamInfo from '../../lib/teamInfo';
 
 const oneMember = teamInfo.PIs[0];
 
-storiesOf('Team Member Card', module)
-  .addDecorator(story => <div className="container-fluid teamPage"><div className="row">{story()}</div></div>)
-  .add('Default', () => <TeamMemberCard image="https://via.placeholder.com/150" memberInfo={oneMember} />);
+export default {
+  title: 'Team Member Card',
+
+  decorators: [
+    (story) => (
+      <div className="container-fluid teamPage">
+        <div className="row">{story()}</div>
+      </div>
+    ),
+  ],
+};
+
+export const Default = () => (
+  <TeamMemberCard
+    image="https://via.placeholder.com/150"
+    memberInfo={oneMember}
+  />
+);
diff --git a/src/TeamPage/__test__/teamPage.stories.jsx b/src/TeamPage/__test__/teamPage.stories.jsx
index b517a0fd..69672fb4 100644
--- a/src/TeamPage/__test__/teamPage.stories.jsx
+++ b/src/TeamPage/__test__/teamPage.stories.jsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { TeamPage } from '../teamPage';
+import TeamPage from '../teamPage';
 import { Navbar } from '../../Navbar/navbar';
-import { Footer } from '../../Footer/footer';
+import Footer from '../../Footer/footer';
 
 const navbarAction = {
   login: action('logging in'),
@@ -14,14 +13,20 @@ const footerAction = {
   login: action('logging in'),
 };
 
-storiesOf('Team Page', module)
-  .addDecorator((story) => (
-    <div className="App">
-      <header>
-        <Navbar {...navbarAction} />
-      </header>
-      <div className="row justify-content-center mt-5 pt-4">{story()}</div>
-      <Footer {...footerAction} />
-    </div>
-  ))
-  .add('Default', () => <TeamPage />);
+export default {
+  title: 'Team Page',
+
+  decorators: [
+    (story) => (
+      <div className="App">
+        <header>
+          <Navbar {...navbarAction} />
+        </header>
+        <div className="row justify-content-center mt-5 pt-4">{story()}</div>
+        <Footer {...footerAction} />
+      </div>
+    ),
+  ],
+};
+
+export const Default = () => <TeamPage />;