Hierarchy suggestion

[jeremschelb]

Prerequisite

• NPM Packages:
  • tailwindcss
  • @studiometa/tailwind-config
  • @studiometa/js-toolkit
  • @studiometa/ui
  • @studiometa/webpack-config
• Base theme : Dawn
• Shopify CLI

  Suggested file hierarchy

  ./
  ├── src/
  │   ├── css/
  │   │   ├── atoms/
  │   │   ├── components/
  │   │   │   ├── article-card.scss
  │   │   │   ├── card.scss
  │   │   │   ├── cart-drawer.scss
  │   │   │   ├── cart-items.scss
  │   │   │   ├── cart-notification.scss
  │   │   │   ├── cart.scss
  │   │   │   ├── facets.scss
  │   │   │   ├── list-menu.scss
  │   │   │   ├── mega-menu.scss
  │   │   │   ├── menu-drawer.scss
  │   │   │   ├── pagination.scss
  │   │   │   ├── price.scss
  │   │   │   ├── product-model.scss
  │   │   │   └── totals.scss
  │   │   ├── molecules/
  │   │   ├── organisms/
  │   │   ├── sections/
  │   │   │   ├── blog-post.scss
  │   │   │   ├── collection-list.scss
  │   │   │   ├── contact-form.scss
  │   │   │   ├── footer.scss
  │   │   │   ├── main-blog.scss
  │   │   │   └── password.scss
  │   │   ├── app.scss
  │   │   └── base.scss
  │   └── js/
  │       ├── atoms/
  │       ├── molecules/
  │       ├── organisms/
  │       ├── app.js
  │       ├── cart-drawer.js
  │       ├── cart-notification.js
  │       ├── cart.js
  │       ├── customer.js
  │       ├── facets.js
  │       ├── global.js
  │       ├── password-modal.js
  │       ├── product-form.js
  │       ├── quick-add.js
  │       └── theme-editor.js
  ├── web/
  │   ├── assets/
  │   ├── config/
  │   │   ├── settings_data.json
  │   │   └── settings_schema.json
  │   ├── layout/
  │   │   ├── password.liquid
  │   │   └── theme.liquid
  │   ├── locales/
  │   │   ├── en.default.json
  │   │   ├── en.default.schema.json
  │   │   ├── fr.json
  │   │   └── fr.schema.json
  │   ├── sections/
  │   │   ├── cart-drawer.liquid
  │   │   ├── cart-notification-button.liquid
  │   │   ├── cart-notification-product.liquid
  │   │   ├── footer.liquid
  │   │   ├── header.liquid
  │   │   ├── main-404
  │   │   ├── main-account.liquid
  │   │   ├── main-active-account.liquid
  │   │   ├── main-addresses.liquid
  │   │   ├── main-article.liquid
  │   │   ├── main-blog.liquid
  │   │   ├── main-cart-footer.liquid
  │   │   ├── main-collection-banner.liquid
  │   │   ├── main-collection-product-grid.liquid
  │   │   ├── main-list-collections.liquid
  │   │   ├── main-login.liquid
  │   │   ├── main-order.liquid
  │   │   ├── main-page.liquid
  │   │   ├── main-password-footer.liquid
  │   │   ├── main-password-header.liquid
  │   │   ├── main-product.liquid
  │   │   ├── main-register.liquid
  │   │   ├── main-reset-password.liquid
  │   │   └── main-search.liquid
  │   ├── snippets/
  │   │   ├── article-card.liquid
  │   │   ├── card-collection.liquid
  │   │   ├── card-product.liquid
  │   │   ├── cart-drawer.liquid
  │   │   ├── cart-notification
  │   │   ├── facets.liquid
  │   │   ├── icon-account.liquid
  │   │   ├── icon-cart-empty.liquid
  │   │   ├── icon-cart.liquid
  │   │   ├── icon-close-small.liquid
  │   │   ├── icon-close.liquid
  │   │   ├── meta-tags.liquid
  │   │   ├── pagination.liquid
  │   │   └── price.liquid
  │   ├── templates/
  │   │   ├── customers/
  │   │   │   ├── account.json
  │   │   │   ├── activate_account.json
  │   │   │   ├── login.json
  │   │   │   ├── order.json
  │   │   │   ├── register.json
  │   │   │   └── reset_password.json
  │   │   ├── 404.json
  │   │   ├── article.json
  │   │   ├── blog.json
  │   │   ├── cart.json
  │   │   ├── collection.json
  │   │   ├── gift_card.liquid
  │   │   ├── index.json
  │   │   ├── list-collections.json
  │   │   ├── page.contact.json
  │   │   ├── page.json
  │   │   ├── password.json
  │   │   ├── product.json
  │   │   └── search.json
  │   ├── .theme-check.yml
  │   ├── LICENCE.md
  │   ├── README.md
  │   └── translation.yml
  ├── .env.example
  ├── .eslintrc.js
  ├── .gitignore
  ├── .gitlab-ci.yml
  ├── .nvmrc
  ├── .prettierrc.js
  ├── .shopifyignore
  ├── .stylelintrc.js
  ├── .stylelintignore
  ├── CHANGELOG.md
  ├── README.md
  ├── meta.config.mjs
  ├── package.json
  └── tailwind.config.js

  Some ideas

• Reduce the number of locale files by defining the required languages and the default language during installation.
• Add the files related to the blog (assets, template and liquid) only if they are necessary.
• Install Shopify CLI as an NPM package?

[titouanmathis]

Thanks for the proposal @jeremschelb, this looks great!

On the folder structure:

• We should have atomic design folders in src/css and src/js along with the sections and snippets which are specific to Shopify
• The web/.gitignore and web/release-note.md files can be deleted (the content of web/.gitignore can be backported to .gitignore)
• The StyleLint configuration files should have a leading . in their name: .stylelintrc and .stylelintignore

To answer your ideas:

• Reduce the number of locale files by defining the required languages and the default language during installation.

I think that EN and FR locales are a nice start. Having them both can help add more by following their example.

• Add the files related to the blog (assets, template and liquid) only if they are necessary.

I think we can start this project with these files and see our usage before taking strong decisions like this.

• Install Shopify CLI as an NPM package?

This is a good idea! But if I am not mistaken, Shopify CLI is not available as an NPM package, it must be installed globally via Homebrew. Could you check the doc to confirm this?

Could you open a PR implementing your suggested structure?

[jeremschelb]

This is a good idea! But if I am not mistaken, Shopify CLI is not available as an NPM package, it must be installed globally via Homebrew. Could you check the doc to confirm this?

I think it can be installed as a dependency : https://www.npmjs.com/package/@shopify/cli

[titouanmathis]

I think it can be installed as a dependency : https://www.npmjs.com/package/@shopify/cli

I am not sure this version is fully working with themes, the list of available commands is missing the one to pull/push themes.

The official Shopify doc seems to still be referencing the CLI v2, which needs to be installed with Homebrew: https://shopify.dev/themes/getting-started/create#step-1-install-shopify-cli.

You can look for more information on the v3 available via NPM and how it could work with themes.