feat: sections

[tlgimenes]

What's the purpose of this pull request?

The whole idea of sections is to split app logic into replaceable/reusable strips of screen content so that CMS users can easily replace/rearrange the desired component on the screen. To allow CMS users to change the page's section, prismic and other CMSs usually use the following Render component logic:

interface Section {
    name: string
    props: any
}

const Sections = {
   Hero: lazy(() => import('./sections/Hero'))
   BannerText: lazy(() => import('./sections/BannerText'))
   ProductShelf: lazy(() => import('./sections/ProductShelf'))
   // ... list goes on an on
}

function Render ({ sections }: { sections: Section[]}) {
  return (
    <>
      {sections.map(section => {
          const Component = Sections[section.name]
          
          return (
             <Suspense fallback={null}>
                <Component {...section.props} />
             <Suspense>
          )
      })}
    </>
  )     
}

This means that the Section map has to render a self contained section.

This PR moves all external logic that were hard coded into the /pages components into the sections so CMS users can correctly change and re-order the sections

How to test it?

Nothing should have changed

Checklist

• CHANGELOG entry added

[netlify]

✔️ Deploy Preview for basestore ready!

🔨 Explore the source changes: dd69d79

🔍 Inspect the deploy log: https://app.netlify.com/sites/basestore/deploys/622b92d1389edd0008da7931

😎 Browse the preview: https://deploy-preview-371--basestore.netlify.app

[gatsby-cloud]

Gatsby Cloud Build Report

basestore

🎉 Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

🕐 Build time: 8m

Performance

Lighthouse report

Metric	Score
Performance	💚 94
Accessibility	💚 100
Best Practices	💚 100
SEO	💚 93

🔗 View full report

[vtex-sites]

Preview is ready

This pull request generated a Preview

👀   Preview: https://preview-371--base.preview.vtex.app
🔬   Go deeper by inspecting the Build Logs
📝   based on commit 0471fcb

[igorbrasileiro]

Why this PR is not here @vtex-sites/storeframework.store ?

[tlgimenes]

Why this PR is not here @vtex-sites/storeframework.store ?

Because I want to have the less difference between this repo and storeframework.store. Without the need for CMS, the sections folder of this repo may be removed too

[filipewl]

LGTM! Found no visual regression on the main pages and the final organization on pages/* looks like what's expected (with only sections).

[eduardoformiga]

Nice Job! 🎉
should we remove the Section from the search page as well?

[eduardoformiga]

Should we make the title prop optional?

[tlgimenes]

Not sure. This component is weird because it's using another section. Sections should be self contained and not depend on other sections. This should be refactored on another PR. I'll add a TODO for this. Thanks!

[tlgimenes]

Nice Job! 🎉
should we remove the Section from the search page as well?

Nice! I haven't seen that! I'll change it