Anatomie rebuild

Full rebuild of the Anatomie Shopify store on a clean Dawn theme.

Installation guide

#	Comment
1	git clone git@github.com:bemeir/anatomie-rebuild.git
2	cd $projectDirectory
3	Requirements needed for this project to be setup: Node - v16.15.1 & NPM - v8.11.0
4	npm install - will install all packages needed for this project to run
5	npm run start - will initialise the project start the node server and activate the file watcher. Most off the time we run with this
6	npm run build - it is a one off build of the project. Copy over all inherited and overriden files. Sass and tailwind compilation and purge.
7	npm run cypress:open - after running npm install cypress should be active. Upon running this command we will go into cypress UI where our tests after choosing the browser we will use will show.

2. Cypress

#	Comment
1	Located in cypress/e2e/ folder
2	lighthouse.cy.js - lighthouse performance cypress task - documentation on the following link https://mfrachet.github.io/cypress-audit/
3	pa11y.cy.js - A command-line interface which loads web pages and highlights any accessibility issues it finds - Documentation can be found on the following link - https://pa11y.org/
4	hidden.cy.js - Simple example how to check for hidden element on the page. This will be improved as we work. More details in the next line
5	We have integrated @testing-library/cypress/add-commands which documentation can be found https://testing-library.com/docs/queries/about. This is a library that I am contributing to also. Contains a lot of testing goodies that we will use. Going forward our element will contain data attributes that we decide are important like [cy-first="first-name"] on which we will test the dom elements. Another example would be [cy-hidden="true"]. Cypress needs to have a mechanism on how to check elements and do the tests. We will need to be carefull and organised with every line of the code.

2. General development workflow

#	Comment
1	Main folder for all files is located in src folder
2	Folder contains assets, config, js, liquid, locales, styles folders
3	assets - folder should contain all custom favicons,fonts,images,svg, and custom vendor css and js. On run of npm run start it will automatically copy over
4	js- folder should contain the styling connection in its designated folders. We can review the files inside of folder to see what they are doing. We are using webpack to import and copy to assets folder all css files that will be generated as bundle.exampleSectionStyles.css.liquid and automatically called on the same named liquid templates. Please reference snippets/style-bundle.liquid to understand how this is working. We are going to automatically do the best practice of calling css & js if we choose so for designated sections and templates. We should not use snippets/script-bundle.liquid because we are going to be using vanila js and alpine js in the liquid templates themselves.
5	liquid - folder was created for Upgradability in mind. As we are aware shopify does not have inheritance or way to extend liquid files. When a liquid file is overridden when the theme update happens it will loose all changes. Any and all files from layout, sections, snippers and templates folder should be copied our src/liquid folder respectivelly. Upon running npm run start files from that folder with automatically be migrated to the shopify root with paths. This way a theme can be upgraded in the in the future check in src what files we have overridden and update manually in our src folder and re run webpack build command.
6	locales - folder was created for Upgradability in mind. As we are aware shopify does not have inheritance or way to extend json files. When a json file is overridden when the theme update happens it will loose all changes. Any and all files from locales folder should be copied to our src/locales folder respectivelly. Upon running npm run start files from that folder with automatically be migrated to the shopify root with paths. This way a theme can be upgraded in the in the future check in src what files we have overridden and update manually in our src folder and re run webpack build command.
7	templates - folder was created for Upgradability in mind. This is for specific component, helper, layout, sections and templates styles. Every file has to be added to the corresponding file in src/js/bundles/$folder. For reference examine how the src/styles/templates/index.scss is called in src/js/bundles/templates/index.js. This will build dynamic specific css assets/bundle.index.css.liquid dynamically called where this template or page corresponds to the name so the liquid files should also be named index.json and section css file names should correspond to section template names and will be rendered dynamically by snippets/style-bundle.liquid for the specific page template or for specific section templates for every section or template or layout.