feat: update storybook config

.gitignore

@@ -145,3 +145,5 @@ src/__snapshots__/*
 # Build files
 build/
 
+.yarnrc.yml
+.yarn

.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"]
+}

package.json

@@ -2,6 +2,7 @@
   "name": "MoTrPAC",
   "version": "2.0.4",
   "type": "module",
+  "packageManager": "[email protected]",
   "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"

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}
+  />
+);

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 />;

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} />;

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 />;

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',
+};