docs: migrate storybook to react router 6

package.json

@@ -99,7 +99,7 @@
         "react-query": "^3.34.0",
         "react-rainbow-components": "1.29.0-canary.c10cd9f",
         "react-redux": "^7.2.0",
-        "react-router-dom": "^5.0.0",
+        "react-router-dom": "^6.3.0",
         "redux": "^4.0.5",
         "redux-form": "^8.3.5",
         "redux-thunk": "^2.3.0",

packages/app/docs/stories/appWithRouter.story.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Switch, Route, Link } from 'react-router-dom';
+import { Route, Link, Routes } from 'react-router-dom';
 import { RainbowLogo } from '@rainbow-modules/icons';
 import app from '../../../../firebase';
 import RainbowFirebaseApp from '../../src/components/App';
@@ -50,15 +50,11 @@ export const basicRouter = () => {
                 </ul>
             </Navigation>
 
-            <Switch>
-                <Container>
-                    <Route exact path="/">
-                        Home page
-                    </Route>
-                    <Route path="/about">About page</Route>
-                    <Route path="/dashboard">Contact us</Route>
-                </Container>
-            </Switch>
+            <Routes>
+                <Route exact path="/" element={<Container>Home page</Container>} />
+                <Route path="/about" element={<Container>About page</Container>} />
+                <Route path="/dashboard" element={<Container>Contact page</Container>} />
+            </Routes>
         </RainbowFirebaseApp>
     );
 };

packages/app/docs/stories/sideBarNavigation.story.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Switch, Route } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import {
     HomeBorder,
     HomeFilled,
@@ -76,17 +76,11 @@ export const sideBarNavigation = () => {
                         path="/billing"
                     />
                 </Bar>
-                <Switch>
-                    <Route exact path="/">
-                        <Content>Home page</Content>
-                    </Route>
-                    <Route path="/export">
-                        <Content>Export page </Content>
-                    </Route>
-                    <Route path="/billing" exact>
-                        <Content>Billing page</Content>
-                    </Route>
-                </Switch>
+                <Routes>
+                    <Route exact path="/" element={<Content>Home page</Content>} />
+                    <Route path="/export" element={<Content>Export page</Content>} />
+                    <Route path="/billing" element={<Content>Billing page</Content>} />
+                </Routes>
             </AppContainer>
         </RainbowFirebaseApp>
     );

packages/app/src/components/SideBarNavigation/__test__/sideBarNavigation.spec.js

@@ -11,9 +11,9 @@ describe('<SideBarNavigation />', () => {
             <Application>
                 <MemoryRouter>
                     <SideBarNavigation>
-                        <SideBarOption />
-                        <SideBarOption />
-                        <SideBarOption />
+                        <SideBarOption path="" />
+                        <SideBarOption path="" />
+                        <SideBarOption path="" />
                     </SideBarNavigation>
                 </MemoryRouter>
             </Application>,

packages/app/src/components/SideBarOption/__test__/sideBarOption.spec.js

@@ -7,7 +7,7 @@ describe('<SideBarOption />', () => {
     it('should render a SidebarItem with the right props', () => {
         const component = mount(
             <MemoryRouter>
-                <SideBarOption icon="icon" name="name" label="label" />
+                <SideBarOption icon="icon" name="name" label="label" path="" />
             </MemoryRouter>,
         );
         const expectedProps = {
@@ -33,6 +33,7 @@ describe('<SideBarOption />', () => {
                     selectedIcon={<SelectedIcon />}
                     name="name"
                     label="label"
+                    path=""
                     isSelected
                 />
             </MemoryRouter>,
@@ -44,7 +45,7 @@ describe('<SideBarOption />', () => {
         const Icon = () => <span>Icon</span>;
         const component = mount(
             <MemoryRouter>
-                <SideBarOption icon={<Icon />} name="name" label="label" isSelected />
+                <SideBarOption icon={<Icon />} name="name" label="label" path="" isSelected />
             </MemoryRouter>,
         );
         expect(component.find(Icon).exists()).toBe(true);

packages/auth/docs/stories/authRoutes.story.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
+import { Route, Routes } from 'react-router-dom';
 import { Button, Input, Card } from 'react-rainbow-components';
 import { RainbowFirebaseApp } from '@rainbow-modules/app';
 import app from '../../../../firebase';
@@ -78,13 +79,25 @@ const Login = () => {
 export const basicEmailPasswordAuthFlow = () => {
     return (
         <RainbowFirebaseApp app={app}>
-            <WhenNoAuthenticated path="/" redirect="/app">
-                <Login />
-            </WhenNoAuthenticated>
-            <WhenAuthenticated path="/app" redirect="/">
-                <span>Authenticated!</span>
-                <Button label="Log Out" onClick={() => app.auth().signOut()} />
-            </WhenAuthenticated>
+            <Routes>
+                <Route
+                    path="/"
+                    element={
+                        <WhenNoAuthenticated redirect="/app">
+                            <Login />
+                        </WhenNoAuthenticated>
+                    }
+                />
+                <Route
+                    path="/app"
+                    element={
+                        <WhenAuthenticated redirect="/">
+                            <span>Authenticated!</span>
+                            <Button label="Log Out" onClick={() => app.auth().signOut()} />
+                        </WhenAuthenticated>
+                    }
+                />
+            </Routes>
         </RainbowFirebaseApp>
     );
 };

packages/auth/docs/stories/emailPasswordSignInForm.story.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { RainbowFirebaseApp } from '@rainbow-modules/app';
 import styled from 'styled-components';
 import { Card, Button } from 'react-rainbow-components';
-import { Redirect } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import EmailPasswordSignInForm from '../../src/components/EmailPasswordSignInForm';
 import WhenAuthenticated from '../../src/components/WhenAuthenticated';
 import WhenNoAuthenticated from '../../src/components/WhenNoAuthenticated';
@@ -34,20 +34,32 @@ const StyledCard = styled(Card)`
 export const basicEmailPasswordSignInForm = () => {
     return (
         <RainbowFirebaseApp app={app}>
-            <Redirect from="/" to="/home" exact />
-            <WhenNoAuthenticated path="/home" redirect="/app">
-                <Container>
-                    <RainbowLogo />
-                    <Title>rainbow-modules</Title>
-                    <StyledCard>
-                        <EmailPasswordSignInForm />
-                    </StyledCard>
-                </Container>
-            </WhenNoAuthenticated>
-            <WhenAuthenticated path="/app" redirect="/home">
-                <span>Authenticated!</span>
-                <Button label="Log Out" onClick={() => app.auth().signOut()} />
-            </WhenAuthenticated>
+            <Routes>
+                <Route
+                    path="/home"
+                    element={
+                        <WhenNoAuthenticated redirect="/app">
+                            <Container>
+                                <RainbowLogo />
+                                <Title>rainbow-modules</Title>
+                                <StyledCard>
+                                    <EmailPasswordSignInForm />
+                                </StyledCard>
+                            </Container>
+                        </WhenNoAuthenticated>
+                    }
+                />
+                <Route
+                    path="/app"
+                    element={
+                        <WhenAuthenticated redirect="/home">
+                            <span>Authenticated!</span>
+                            <Button label="Log Out" onClick={() => app.auth().signOut()} />
+                        </WhenAuthenticated>
+                    }
+                />
+                <Route path="*" element={<Navigate to="/home" replace />} />
+            </Routes>
         </RainbowFirebaseApp>
     );
 };

packages/auth/docs/stories/emailPasswordSignUpForm.story.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { Button, Card } from 'react-rainbow-components';
 import { RainbowFirebaseApp } from '@rainbow-modules/app';
 import { RainbowLogo } from '@rainbow-modules/icons';
-import { Redirect } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import app from '../../../../firebase';
 import WhenAuthenticated from '../../src/components/WhenAuthenticated';
 import WhenNoAuthenticated from '../../src/components/WhenNoAuthenticated';
@@ -34,20 +34,32 @@ const StyledCard = styled(Card)`
 export const basicEmailPasswordSignUpForm = () => {
     return (
         <RainbowFirebaseApp app={app}>
-            <Redirect from="/" to="/home" exact />
-            <WhenNoAuthenticated path="/home" redirect="/app">
-                <Container>
-                    <RainbowLogo />
-                    <Title>rainbow-modules</Title>
-                    <StyledCard>
-                        <EmailPasswordSignUpForm />
-                    </StyledCard>
-                </Container>
-            </WhenNoAuthenticated>
-            <WhenAuthenticated path="/app" redirect="/home">
-                <span>Authenticated!</span>
-                <Button label="Log Out" onClick={() => app.auth().signOut()} />
-            </WhenAuthenticated>
+            <Routes>
+                <Route
+                    path="/home"
+                    element={
+                        <WhenNoAuthenticated redirect="/app">
+                            <Container>
+                                <RainbowLogo />
+                                <Title>rainbow-modules</Title>
+                                <StyledCard>
+                                    <EmailPasswordSignUpForm />
+                                </StyledCard>
+                            </Container>
+                        </WhenNoAuthenticated>
+                    }
+                />
+                <Route
+                    path="/app"
+                    element={
+                        <WhenAuthenticated redirect="/home">
+                            <span>Authenticated!</span>
+                            <Button label="Log Out" onClick={() => app.auth().signOut()} />
+                        </WhenAuthenticated>
+                    }
+                />
+                <Route path="*" element={<Navigate to="/home" replace />} />
+            </Routes>
         </RainbowFirebaseApp>
     );
 };

packages/auth/docs/stories/loginAnonymously.story.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { RainbowFirebaseApp } from '@rainbow-modules/app';
+import { Route, Routes } from 'react-router-dom';
 import app from '../../../../firebase';
 import WhenAuthenticated from '../../src/components/WhenAuthenticated';
 
@@ -28,16 +29,23 @@ const UserId = () => {
 export const loginAnonymously = () => {
     return (
         <RainbowFirebaseApp app={app} initialize={initialize}>
-            <WhenAuthenticated path="/">
-                <h1>You are authenticated anonymously!</h1>
-                <UserId />
-                <p>
-                    Firebase docs here:
-                    <a href="https://firebase.google.com/docs/auth/web/anonymous-auth">
-                        https://firebase.google.com/docs/auth/web/anonymous-auth
-                    </a>
-                </p>
-            </WhenAuthenticated>
+            <Routes>
+                <Route
+                    path="/"
+                    element={
+                        <WhenAuthenticated path="/">
+                            <h1>You are authenticated anonymously!</h1>
+                            <UserId />
+                            <p>
+                                Firebase docs here:
+                                <a href="https://firebase.google.com/docs/auth/web/anonymous-auth">
+                                    https://firebase.google.com/docs/auth/web/anonymous-auth
+                                </a>
+                            </p>
+                        </WhenAuthenticated>
+                    }
+                />
+            </Routes>
         </RainbowFirebaseApp>
     );
 };

packages/auth/src/components/WhenAuthenticated/index.js

@@ -38,7 +38,7 @@ const WhenAuthenticatedV6 = (props) => {
     const isAuth = useAuthState();
 
     useEffect(() => {
-        if (isAuth === false) {
+        if (redirect && isAuth === false) {
             navigate(redirect);
         }
     }, [isAuth, navigate, redirect]);

packages/auth/src/components/WhenNoAuthenticated/index.js

@@ -39,7 +39,7 @@ const WhenNoAuthenticatedV6 = (props) => {
     const Component = component;
 
     useEffect(() => {
-        if (isAuth === true) {
+        if (redirect && isAuth === true) {
             navigate(redirect);
         }
     }, [isAuth, navigate, redirect]);

packages/misc/docs/stories/LinkButton.story.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes, Switch } from 'react-router-dom';
 import LinkButton from '../../src/components/LinkButton';
 import RainbowFirebaseApp from '../../../app/src/components/App';
 
@@ -68,18 +68,19 @@ export const LinkButtonVariants = () => {
                 </LinkButton>
             </div>
             <div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
-                <Switch>
-                    <Route path="/base">Navigated to Base</Route>
-                    <Route path="/outline-brand">Navigated to Outline Brand</Route>
-                    <Route path="/border">Navigated to Border</Route>
-                    <Route path="/neutral">
-                        <span data-cy="neutral">Navigated to Neutral</span>
-                    </Route>
-                    <Route path="/border-filled">Navigated to Border Filled</Route>
-                    <Route path="/brand">Navigated to Brand</Route>
-                    <Route path="/success">Navigated to Success</Route>
-                    <Route path="/destructive">Navigated to Destructive</Route>
-                </Switch>
+                <Routes>
+                    <Route path="/base" element={<>Navigated to Base</>} />
+                    <Route path="/outline-brand" element={<>Navigated to Outline Brand</>} />
+                    <Route path="/border" element={<>Navigated to Border</>} />
+                    <Route
+                        path="/neutral"
+                        element={<span data-cy="neutral">Navigated to Neutral</span>}
+                    />
+                    <Route path="/border-filled" element={<>Navigated to Border Filled</>} />
+                    <Route path="/brand" element={<>Navigated to Brand</>} />
+                    <Route path="/success" element={<>Navigated to Success</>} />
+                    <Route path="/destructive" element={<>Navigated to Destructive</>} />
+                </Routes>
             </div>
         </RainbowFirebaseApp>
     );
@@ -89,13 +90,13 @@ export const LinkButtonSizes = () => {
     return (
         <RainbowFirebaseApp>
             <div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
-                <LinkButton variant="brand" className="rainbow-m-around_medium" size="small">
+                <LinkButton variant="brand" className="rainbow-m-around_medium" size="small" to="">
                     Button Small
                 </LinkButton>
-                <LinkButton variant="brand" className="rainbow-m-around_medium" size="medium">
+                <LinkButton variant="brand" className="rainbow-m-around_medium" size="medium" to="">
                     Button Medium
                 </LinkButton>
-                <LinkButton variant="brand" className="rainbow-m-around_medium" size="large">
+                <LinkButton variant="brand" className="rainbow-m-around_medium" size="large" to="">
                     Button Large
                 </LinkButton>
             </div>

packages/misc/src/components/LinkButton/__test__/linkButton.spec.js

@@ -8,7 +8,7 @@ describe('<LinkButton />', () => {
     it('should render a Link when target is not `_blank`', () => {
         const component = mount(
             <RainbowFirebaseApp>
-                <LinkButton>Test</LinkButton>
+                <LinkButton to="">Test</LinkButton>
             </RainbowFirebaseApp>,
         );
         expect(component.find(Link).exists()).toBe(true);
@@ -17,7 +17,9 @@ describe('<LinkButton />', () => {
     it('should render a regular anchor when target is `_blank`', () => {
         const component = mount(
             <RainbowFirebaseApp>
-                <LinkButton>Test</LinkButton>
+                <LinkButton to="" target="_blank">
+                    Test
+                </LinkButton>
             </RainbowFirebaseApp>,
         );
         expect(component.find('a').exists()).toBe(true);