feat: integrate with VTEX headless CMS

[danzanzini]

What's the purpose of this pull request?

This PR adds CMS capabilities to gatsby.store. It addresses mostly parts of the CMS Spike. This PR:

• Integrates gatsby.store with storeframework vtex store;
• Renders one component using CMS (global alert)
• Renders one page using cms (/cms)
• Adds page rendered to lighthouse tests

The script to remove all cms related code is not done but will be tackled later.

How does it work?

Firstly, I followed the cms tutorial to integrate gatsby.store with storeframework, then I followed the structure already created at storeframework.store to render things using CMS data.

Regarding code architecture

Since we want to easily remove CMS-related code from the repo, I've added CMS components and pages in the same structure already used for non-cms stuff. i.e:

• index page without cms: pages/index.tsx
• index page with cms: pages/cms/index.tsx
• global alert component without cms: components/common/Alert
• global alert component with cms: components/cms/common/Alert

This way, it'd be easy to create a script that removes all cms-related code and overwrites it properly.

How to test it?

Open the preview link. The global alert should be working with the message defined at the CMS. Which says: Alert from master. The link should send to /office.

You should also want to visit /cms and see if it's everything fine.

References

https://www.faststore.dev/tutorials/cms-overview
https://github.com/vtex-sites/storeframework.store

Checklist

You may erase this after checking them all ;)

Changelog

• Added an entry in the CHANGELOG.md at the beginning of its due section. The latest version should comes first.
• Added the PR number with the PR link at the entry in the CHANGELOG.md. E.g., New items in the pull_request_template.md (#12)

PR Description

• Added a label according to the PR goal - Breaking change, Enhancement, Bug or Chore.
• Added the component, hook, or pathname in-between backticks (``) - If applicable. E.g., ComponentName component.
• Identified the function or parameter in the PR - If applicable. E.g., useWindowDimensions hook.

Documentation

• PR description
• Added to/Updated the Storybook - if applicable.
• For documentation changes, ping @ carolinamenezes, @ PedroAntunesCosta or @ Mariana-Caetano to review and update.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
gatsby-store-storybook	✅ Ready (Inspect)	Visit Preview	Jul 19, 2022 at 2:51PM (UTC)

[vtex-sites]

Preview is ready

This pull request generated a Preview

👀   Preview: https://sfj-bc92bb2--gatsby.preview.vtex.app
🔬   Go deeper by inspecting the Build Logs
📝   based on commit bc92bb2

[vtex-sites]

Lighthouse Reports

Here are the Lighthouse reports of this Pull Request

📝 Based on commit bc92bb2

Lighthouse Report by page
📎   /
📎   /apple-magic-mouse/p
📎   /office
📎   /cms

[ArthurTriis1]

LGTM! And the tests worked fine!

[tlgimenes]

Ok. I liked the strategy, however, I don't see us using the same strategy on Next.JS or similar. I'd rather go with a strategy we don't use the gatsby-plugin-cms and useStaticQuery. Also, I found it weird to have components specific for cms com components/cms

I'm leaning towards having a first class integration between CMS and the starter on the pages folder so that it's easy to remove by changing the pages folder

[tlgimenes]

This is weird. We have a CMS component affecting non CMS pages, since Layout.tsx is being imported on gatsby-browser.tsx.

[icazevedo]

I agree with Gimenes' points. Will we be doing this in future iterations of this feature?

[filipewl]

I believe we can close this one in favor of #172.