feat: use sc v6 beta (#901)

* feat: use sc v6 beta

* chore: fix stories to work with v6

* chore: update test snaps

Author: quantizor

components/DocsLayout.js

@@ -52,7 +52,7 @@ class DocsLayout extends Component {
           onRouteChange={this.onRouteChange}
         />
 
-        <Content moveRight={!isSideFolded} data-e2e-id="content">
+        <Content $moveRight={!isSideFolded} data-e2e-id="content">
           <Title>{title}</Title>
 
           {children}

components/Footer/index.js

@@ -42,7 +42,7 @@ const FooterContent = styled(Content)`
 const Footer = () => (
   <>
     <Wrapper>
-      <FooterContent hero>
+      <FooterContent $hero>
         {' '}
         {'Hosted on '}
         <FooterLink inline href="https://vercel.com">

components/Image.js

@@ -60,7 +60,7 @@ const Caption = styled.p`
 
 const ImageWrapper = styled.div`
   position: relative;
-  padding-bottom: ${props => props.aspectRatio};
+  padding-bottom: ${props => props.$aspectRatio};
 `;
 
 class Image extends Component {
@@ -77,7 +77,7 @@ class Image extends Component {
     return (
       <Figure margin={margin}>
         <Main width={width}>
-          <ImageWrapper aspectRatio={aspectRatio}>{renderImage && renderImage(rest)}</ImageWrapper>
+          <ImageWrapper $aspectRatio={aspectRatio}>{renderImage && renderImage(rest)}</ImageWrapper>
 
           {caption && <Caption captionSpacing={captionSpacing}>{caption}</Caption>}
         </Main>

components/Layout.js

@@ -28,11 +28,11 @@ export const Content = styled.div`
 
   ${mobile(css`
     padding: ${rem(100)} ${rem(20)} ${rem(30)} ${rem(20)};
-    transform: translateX(${p => (p.moveRight ? rem(sidebarWidth) : 0)});
+    transform: translateX(${p => (p.$moveRight ? rem(sidebarWidth) : 0)});
   `)};
 
   ${p =>
-    p.hero &&
+    p.$hero &&
     css`
       font-family: ${headerFont};
       width: 75rem;

components/Nav/Logo.js

@@ -11,7 +11,7 @@ const Logo = styled.div`
   background-size: contain;
 
   ${p =>
-    p.compact
+    p.$compact
       ? css`
           background-image: url(/icon.png);
           width: ${rem(100)};

components/Nav/MobileNavbar.js

@@ -30,7 +30,7 @@ const SecondaryMenu = styled.div`
   right: 0;
 
   ${p =>
-    p.isOpen
+    p.$isOpen
       ? css`
           height: ${rem(navbarHeight)};
         `
@@ -65,7 +65,7 @@ const ArrowWrapper = styled.div`
   transition: transform 0.2s;
 
   ${p =>
-    p.shouldRotate &&
+    p.$shouldRotate &&
     css`
       transform-origin: center center;
       transform: rotate(180deg);
@@ -89,27 +89,27 @@ const MobileNavbar = props => {
   return (
     <Wrapper>
       {showSideNav !== false && (
-        <NavButton active={!isSideFolded} onClick={onSideToggle}>
+        <NavButton $active={!isSideFolded} onClick={onSideToggle}>
           {isSideFolded ? <FoldIcon /> : <CloseIcon />}
         </NavButton>
       )}
 
       <LogoLink>
-        <Logo compact />
+        <Logo $compact />
       </LogoLink>
       <div>
         <NavButton onClick={onSearchButtonClick}>
           <StyledIcon as={Search} size={28} />
         </NavButton>
 
-        <NavButton onClick={onMobileNavToggle} active={!isMobileNavFolded}>
-          <ArrowWrapper shouldRotate={!isMobileNavFolded}>
+        <NavButton onClick={onMobileNavToggle} $active={!isMobileNavFolded}>
+          <ArrowWrapper $shouldRotate={!isMobileNavFolded}>
             <StyledIcon as={KeyboardArrowDown} size={36} />
           </ArrowWrapper>
         </NavButton>
       </div>
 
-      <SecondaryMenu isOpen={!isMobileNavFolded}>
+      <SecondaryMenu $isOpen={!isMobileNavFolded}>
         <NavLinks />
         <SecondaryMenuItem>
           <Social />

components/Nav/NavButton.js

@@ -6,7 +6,7 @@ import { resetInput } from '../../utils/form';
 
 const NavButton = styled.button`
   ${resetInput};
-  background: ${p => (p.active ? 'rgba(0, 0, 0, 0.07)' : 'none')};
+  background: ${p => (p.$active ? 'rgba(0, 0, 0, 0.07)' : 'none')};
   cursor: pointer;
   flex: 0 0 auto;
   height: ${rem(navbarHeight)};

components/Nav/Navbar.js

@@ -25,7 +25,7 @@ const Wrapper = styled.nav`
   font-family: ${headerFont};
   font-size: ${rem(15)};
   font-weight: 500;
-  background: ${props => (props.transparent ? 'transparent' : blmGrey)};
+  background: ${props => (props.$transparent ? 'transparent' : blmGrey)};
   transition: background 300ms ease-out;
   color: white;
   padding: 0;
@@ -82,7 +82,7 @@ const AlgoliaModalHeader = styled.div`
   color: currentColor;
 
   ${mobile(css`
-    display: ${props => (props.isOpen ? 'block' : 'none')};
+    display: ${props => (props.$isOpen ? 'block' : 'none')};
 
     button {
       cursor: pointer;
@@ -107,7 +107,7 @@ const AlgoliaModalOverlay = styled.div`
     right: 0;
     z-index: ${baseZ};
     left: 0;
-    display: ${props => (props.isOpen ? 'block' : 'none')};
+    display: ${props => (props.$isOpen ? 'block' : 'none')};
     background: ${paleGrey};
     overflow-y: auto;
     margin: 0;
@@ -135,12 +135,12 @@ class ModalContainer extends PureComponent {
   render() {
     return (
       <>
-        <AlgoliaModalHeader isOpen={this.props.isOpen}>
+        <AlgoliaModalHeader $isOpen={this.props.isOpen}>
           <button onClick={this.onCloseButtonClick}>
             <StyledModalCloseIcon />
           </button>
         </AlgoliaModalHeader>
-        <AlgoliaModalOverlay onClick={this.onModalOverlayClick} isOpen={this.props.isOpen}>
+        <AlgoliaModalOverlay onClick={this.onModalOverlayClick} $isOpen={this.props.isOpen}>
           <AlgoliaModal ref={this.modalElement}>
             <div>{this.props.children}</div>
           </AlgoliaModal>
@@ -169,7 +169,7 @@ class Navbar extends PureComponent {
     const { onSideToggle, onMobileNavToggle, isSideFolded, isMobileNavFolded, showSideNav, transparent } = this.props;
 
     return (
-      <Wrapper transparent={transparent}>
+      <Wrapper $transparent={transparent}>
         <NormalNavbar>
           <StartWrapper>
             <LogoLink>

components/Nav/Sidebar.js

@@ -27,7 +27,7 @@ const Sidebar = styled.nav`
 
   ${mobile(css`
     ${p =>
-      p.isFolded
+      p.$isFolded
         ? css`
             transform: translateX(${rem(-sidebarWidth)});
           `

components/Nav/SidebarMenus.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import styled from 'styled-components';
-import { withRouter } from 'next/router';
+import { useRouter, withRouter } from 'next/router';
 
 import rem from '../../utils/rem';
 import titleToDash from '../../utils/titleToDash';
@@ -89,47 +89,44 @@ function getSectionPath(parentPathname, title) {
 
 function isFolderOpen(currentHref, { pathname, title, sections }) {
   return (
-    sections.reduce((sum, v) => sum || window.location.href.endsWith(getSectionPath(pathname, v.title)), false) ||
-    window.location.href.endsWith(pathname || '#' + titleToDash(title))
+    sections.reduce((sum, v) => sum || currentHref.endsWith(getSectionPath(pathname, v.title)), false) ||
+    currentHref.endsWith(pathname || '#' + titleToDash(title))
   );
 }
 
-export const SimpleSidebarMenu = ({ onRouteChange, pages = [] }) => (
-  <MenuInner>
-    {pages.map(({ title, pathname, sections, href }) => {
-      if (!sections) {
+export const SimpleSidebarMenu = ({ onRouteChange, pages = [] }) => {
+  const router = useRouter();
+
+  return (
+    <MenuInner>
+      {pages.map(({ title, pathname, sections, href }, idx) => {
+        if (!sections) {
+          return (
+            <TopLevelLink key={idx}>
+              <StyledLink href={pathname || '#' + (href || titleToDash(title))}>{title}</StyledLink>
+            </TopLevelLink>
+          );
+        }
+
         return (
-          <TopLevelLink key={title}>
-            <StyledLink href={pathname || '#' + (href || titleToDash(title))}>{title}</StyledLink>
-          </TopLevelLink>
+          <Folder key={idx} isOpenDefault={isFolderOpen(router.asPath, { title, pathname, sections })}>
+            {({ rootProps, toggleSubSections, isOpen }) => (
+              <Section {...rootProps} onClick={onRouteChange}>
+                <SectionTitle onClick={toggleSubSections}>
+                  <Link href={pathname || '#' + titleToDash(title)}>{title}</Link>
+                </SectionTitle>
+
+                {isOpen &&
+                  sections.map(({ title }) => (
+                    <SubSection key={title}>
+                      <StyledLink href={getSectionPath(pathname, title)}>{title}</StyledLink>
+                    </SubSection>
+                  ))}
+              </Section>
+            )}
+          </Folder>
         );
-      }
-
-      return (
-        <Folder
-          key={title}
-          isOpenDefault={
-            typeof window !== 'undefined' && isFolderOpen(window.location.href, { title, pathname, sections })
-          }
-        >
-          {({ rootProps, toggleSubSections, isOpen }) => (
-            <Section {...rootProps} onClick={onRouteChange}>
-              <SectionTitle onClick={toggleSubSections}>
-                <Link href={pathname || '#' + titleToDash(title)}>{title}</Link>
-              </SectionTitle>
-
-              {isOpen &&
-                sections.map(({ title }) => (
-                  <SubSection key={title}>
-                    <StyledLink unstyled href={getSectionPath(pathname, title)}>
-                      {title}
-                    </StyledLink>
-                  </SubSection>
-                ))}
-            </Section>
-          )}
-        </Folder>
-      );
-    })}
-  </MenuInner>
-);
+      })}
+    </MenuInner>
+  );
+};