Merge pull request #74 from commercelayer/updates

feat: refactor components and update UI
commercelayer · Jul 13, 2023 · 2487cbb · 2487cbb
2 parents 0a103dd + 308245c
commit 2487cbb
Show file tree

Hide file tree

Showing 53 changed files with 9,514 additions and 19,839 deletions.
diff --git a/.env.local.example b/.env.local.example
@@ -1,12 +1,11 @@
 # ----- Template UI ------
 BUILD_LANGUAGES=en-US,it-IT,fr-FR
-BUILD_CMS=sanity
 NEXT_PUBLIC_SITE_NAME=
 NEXT_PUBLIC_SITE_URL=
 
 # ----- Commerce Layer ------
-CL_CLIENT_ID=
-CL_ENDPOINT=
+NEXT_PUBLIC_CL_CLIENT_ID=
+NEXT_PUBLIC_CL_ENDPOINT=
 
 # ----- Sanity Studio ------
 NEXT_PUBLIC_SANITY_PROJECT_TITLE=

diff --git a/.eslintrc b/.eslintrc
@@ -1,5 +1,5 @@
 {
-  "extends": ["eslint:recommended", "next", "prettier"],
+  "extends": ["next", "next/core-web-vitals", "eslint:recommended", "prettier"],
   "rules": {
     "no-console": ["warn", { "allow": ["warn", "error"] }],
     "jsx-quotes": ["error", "prefer-double"],
@@ -14,7 +14,7 @@
     "object-curly-spacing": ["error", "always"],
     "comma-spacing": ["error", { "before": false, "after": true }],
     "comma-dangle": ["error", "never"],
-    "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 2 }],
+    "newline-per-chained-call": ["error", { "ignoreChainWithDepth": 5 }],
     "key-spacing": [
       "error",
       {

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
diff --git a/.github/ISSUE_TEMPLATE/custom.md b/.github/ISSUE_TEMPLATE/custom.md
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -12,23 +12,27 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v1
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2.2.2
+        with:
+          version: 7
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
           node-version: 16
+
       - name: Install dependencies
-        run: npm install
+        run: pnpm install
       - name: Run package
         env:
-          CL_CLIENT_ID: ${{ secrets.CL_CLIENT_ID }}
-          CL_ENDPOINT: ${{ secrets.CL_ENDPOINT }}
+          NEXT_PUBLIC_CL_CLIENT_ID: ${{ secrets.NEXT_PUBLIC_CL_CLIENT_ID }}
+          NEXT_PUBLIC_CL_ENDPOINT: ${{ secrets.NEXT_PUBLIC_CL_ENDPOINT }}
           NEXT_PUBLIC_SANITY_DATASET: ${{ secrets.NEXT_PUBLIC_SANITY_DATASET }}
           NEXT_PUBLIC_SANITY_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_SANITY_PROJECT_ID }}
           NEXT_PUBLIC_SANITY_API_VERSION: ${{ secrets.NEXT_PUBLIC_SANITY_API_VERSION }}
           NEXT_PUBLIC_SANITY_TOKEN: ${{ secrets.NEXT_PUBLIC_SANITY_TOKEN }}
           BUILD_LANGUAGES: ${{ vars.BUILD_LANGUAGES }}
-          BUILD_CMS: ${{ vars.BUILD_CMS }}
-        run: npm run build
+        run: pnpm run build
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,4 @@
 {
   "trailingComma": "none",
-  "printWidth": 120
+  "printWidth": 100
 }
diff --git a/README.md b/README.md
@@ -6,9 +6,9 @@ A multi-country ecommerce template built with Commerce Layer, Next.js, Sanity st
 
 [![A preview image showing the frontend demo with some products.](./public/preview.gif)](https://commercelayer-sanity-template.netlify.app)
 
-## What is Commerce Layer?
+Want to learn more about how we built the first version of this template and how you can build yours? Then you should read [this article](https://commercelayer.io/blog/how-to-build-an-international-ecommerce-website-with-sanity-and-commerce-layer) on our blog.
 
-[Commerce Layer](https://commercelayer.io) is a multi-market commerce API and order management system that lets you add global shopping capabilities to any website, mobile app, chatbot, wearable, voice, or IoT device, with ease. Compose your stack with the best-of-breed tools you already mastered and love. Make any experience shoppable, anywhere, through a blazing-fast, enterprise-grade, and secure API.
+---
 
 ## Table of Contents
 
@@ -17,6 +17,7 @@ A multi-country ecommerce template built with Commerce Layer, Next.js, Sanity st
   - [Installation Guide](#installation-guide)
   - [Import Seed Commerce Layer Data](#import-seed-commerce-layer-data)
   - [Import Seed Sanity Studio Content](#import-seed-sanity-studio-content)
+  - [Add Custom Data](#add-custom-commerce-and-content-data)
 - [Contributors Guide](#contributors-guide)
 - [Need Help?](#need-help)
 - [License](#license)
@@ -45,25 +46,26 @@ A multi-country ecommerce template built with Commerce Layer, Next.js, Sanity st
 
 | **Path**                           | **Description**                      |
 | ---------------------------------- | ------------------------------------ |
-| `.env.local.sample`                | Example file with all the required environment variables.                                                      |  
-| `/components`                      | React components for the storefront. | 
-| `/locale/index.ts`                 | Config file for the storefront's transalations (`en-US`, `it-IT`, and `fr-FR`).                              |
-| `/hooks/GetToken.ts`               | React hook file to fetch a salesChannel token from Commerce Layer and save as a cookie.                             |
-| `/pages/[countryCode]/[lang]/index.tsx`     | Index page for the storefront (country selector and product listing).                                    |
-| `/pages/[countryCode]/[lang]/[product].tsx` | Page for all product items (image, product information, and variant selection).                        |
-| `/data`                            | Exported data to seed your Sanity studio with.                                                                |  
-| `/utils/sanity/api.ts`             | Where all data from Sanity is fetched using `groq` queries.                                                       |
-| `sanity.config.ts`                 | Config file for Sanity Studio.                                                                     |
-| `sanity.cli.ts`                    | Config file for Sanity CLI.                                                                        |
-| `/pages/studio/[[...index]].tsx`   | Where Sanity Studio is mounted using `next-sanity`.                                                              |
-| `/schemas`                         | Where Sanity Studio gets its content types from.                                                                 |
-| `/plugins`                         | Where the advanced Sanity Studio customization is setup.                                                     |
+| `.env.local.sample`                | Example file with all the required environment variables.               |  
+| `/components`                      | React components for the storefront.                          |
+| `/locale/index.ts`                 | Config file for the storefront's transalations (`en-US`, `it-IT`, and `fr-FR`).     |
+| `/hooks/GetToken.ts`               | React hook file to fetch a salesChannel token from Commerce Layer and save as a cookie.    |
+| `/pages/[countryCode]/[lang]/index.tsx`     | Index page for the storefront (country selector and product listing).          |
+| `/pages/[countryCode]/[lang]/[product].tsx` | Page for all product items (image, product information, and variant selection).       |
+| `/pages/[countryCode]/[lang]/cart.tsx` | Cart page for for the storefront with link to checkout.        |
+| `/data`                            | Exported data to seed your Sanity studio with.                         |  
+| `/utils/sanity/api.ts`             | Where all data from Sanity is fetched using `groq` queries.        |
+| `sanity.config.ts`                 | Config file for Sanity Studio.  |
+| `sanity.cli.ts`                    | Config file for Sanity CLI.     |
+| `/pages/studio/[[...index]].tsx`   | Where Sanity Studio is mounted using `next-sanity`.                 |
+| `/schemas`                         | Where Sanity Studio gets its content types from.                  |
+| `/plugins`                         | Where the advanced Sanity Studio customization is setup.              |
 
 ## Getting Started
 
 The quickest way to get up and running is to use the deploy button below to set up and deploy automatically to Netlify. Afterward, you will add some seed data to Commerce Layer and Sanity studio. The deploy button will clone this repository and ask you to enter all the required environment variables. Alternatively, you can clone this repository, configure the template, import the dataset into your Sanity studio, import some seed commerce data into your Commerce Layer organization, and deploy your application. The installation guides below will show you how to achieve this.
 
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/commercelayer/commercelayer-sanity-template#BUILD_LANGUAGES=en-US,it-IT,fr-FR&BUILD_CMS=sanity)
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/commercelayer/commercelayer-sanity-template#BUILD_LANGUAGES=en-US,it-IT,fr-FR)
 
 ### Installation Guide
 
@@ -74,11 +76,10 @@ The quickest way to get up and running is to use the deploy button below to set
 | **Variable**                         | **Description**                     |
 | ------------------------------------ | ----------------------------------- |
 | `BUILD_LANGUAGES`                    | The supported locales (the default is `en-US, it-IT, fr-FR`).                                                       |
-| `BUILD_CMS`                          | The name of the CMS in use (the default is `sanity`).                                                        |
 | `NEXT_PUBLIC_SITE_NAME`              | Optional name for the `<title>` head tag (you can also edit this directly in the code).                           |
 | `NEXT_PUBLIC_SITE_URL`               | Optional URL of your deployed project for the `og:url` meta property (you can also edit this directly in the code).|
-| `CL_CLIENT_ID`                       | Your Commerce Layer sales channels application client ID (you can create this automatically by following this [onboarding guide](https://docs.commercelayer.io/developers) or manually on the [Commerce Layer dashboard](https://dashboard.commercelayer.io).          |
-| `CL_ENDPOINT`                        | Your Commerce Layer organization's base endpoint (you can copy this on the [Commerce Layer dashboard](https://dashboard.commercelayer.io).                                                 |
+| `NEXT_PUBLIC_CL_CLIENT_ID`                       | Your Commerce Layer sales channels application client ID (you can create this automatically by following this [onboarding guide](https://docs.commercelayer.io/developers) or manually on the [Commerce Layer dashboard](https://dashboard.commercelayer.io).          |
+| `NEXT_PUBLIC_CL_ENDPOINT`                        | Your Commerce Layer organization's base endpoint (you can copy this on the [Commerce Layer dashboard](https://dashboard.commercelayer.io).                                                 |
 | `NEXT_PUBLIC_SANITY_PROJECT_TITLE`   | Optional name for the `<title>` head tag in Sanity studio (you can also edit this directly in the code).          |
 | `NEXT_PUBLIC_SANITY_PROJECT_ID`      | Sanity project ID (you can get this from [sanity.io/manage](https://sanity.io/manage) after creating a new project with the `npm -y create sanity@latest` CLI command or this [quick start wizard](https://sanity.io/get-started).                           |
 | `NEXT_PUBLIC_SANITY_DATASET`         | Sanity dataset (you can get this from [sanity.io/manage](https://sanity.io/manage)).                                |
@@ -88,13 +89,13 @@ The quickest way to get up and running is to use the deploy button below to set
 3. Run the command below to install the required dependencies:
 
 ```bash
-npm install
+pnpm install
 ```
 
 4. Run the command below to start the development server:
 
 ```bash
-npm run dev
+pnpm run dev
 ```
 
 This will run the storefront at `localhost:3000` and studio at `localhost:3000/studio`.
@@ -179,7 +180,19 @@ sanity dataset import ./data/<name of extracted folder>/data.ndjson <your_datase
 >
 > You must access the application using the right locale slug for the country you have configured (e.g., `localhost:3000/it/it-it` or `localhost:3000/us/en-us`). Currently, Italy and France are the only countries with a default language different from `en-us`. Hence their slug is `localhost:3000/it/it-it` and `localhost:3000/fr/fr-fr`. Other countries will have the `en-us` slug (e.g., `localhost:3000/ng/en-us`). If you want to set up other countries, then create a market for it on Commerce Layer alongside the associated resources and update the Market ID on Sanity, as mentioned earlier.
 
-Eventually, you would want to add your content data and set up Commerce Layer manually based on your use case. To ensure the template runs smoothly, kindly create a [market](https://docs.commercelayer.io/core/v/api-reference/markets) associated with a [stock location](https://docs.commercelayer.io/core/v/api-reference/stock_locations), [stock item](https://docs.commercelayer.io/core/v/api-reference/stock_items), [price list](https://docs.commercelayer.io/core/v/api-reference/price_lists), [price](https://docs.commercelayer.io/core/v/api-reference/prices), and [SKU](https://docs.commercelayer.io/core/v/api-reference/skus) in Commerce Layer and update the `market ID` attribute, create a product, and link to variant(s) on Sanity. If you want to learn more about how Commerce Layer works, see our [onboarding guide](https://docs.commercelayer.io/core/welcome/onboarding-tutorial), [manual configuration guide](https://docs.commercelayer.io/core/welcome/manual-configuration), or [data models documentation](https://commercelayer.io/docs/data-model).
+### Add Custom Commerce and Content Data
+
+Eventually, you would want to set up commerce data in Commerce Layer manually and add your content data in Sanity based on your use case. To ensure the template runs smoothly, kindly do the following:
+
+1. In the [Commerce Layer dashboard](https://dashboard.commercelayer.io), create a [market](https://docs.commercelayer.io/core/v/api-reference/markets) (if you need a new one) associated with a [stock location](https://docs.commercelayer.io/core/v/api-reference/stock_locations), [stock item](https://docs.commercelayer.io/core/v/api-reference/stock_items), [price list](https://docs.commercelayer.io/core/v/api-reference/price_lists), [price](https://docs.commercelayer.io/core/v/api-reference/prices), and [SKU](https://docs.commercelayer.io/core/v/api-reference/skus)(s) and add a new `Country` content in Sanity using a valid `market ID` attribute.
+
+2. In the Sanity studio, add the content for the new SKUs as a `Variant` and associate them with a `Product` content model. You can then go ahead to update other content models like `Taxon`, `Taxonomy`, and `Catalog` as you deem fit.
+
+3. Ensure to read our [onboarding guide](https://docs.commercelayer.io/core/welcome/onboarding-tutorial), [manual configuration guide](https://docs.commercelayer.io/core/welcome/manual-configuration), or [data models documentation](https://commercelayer.io/docs/data-model) to learn more about how Commerce Layer works and the relationships between each API resource.
+
+> **Note**
+>
+> If you want to start a fresh project, we recommend you use a fresh Commerce Layer organization and a fresh Sanity studio without seed data so you can add your data from scratch. You can then use the seed data as a guide to set up all the required resources in Commerce Layer. If you have existing commerce data, you can also leverage our [Import API](https://docs.commercelayer.io/core/importing-resources) or [CLI Import Plugin](https://github.com/commercelayer/commercelayer-cli-plugin-imports/).
 
 ## Contributors Guide
 
@@ -209,4 +222,9 @@ This repository is published under the [MIT](LICENSE) license.
 
 ---
 
-Want to learn more about how we built this template  (the first version) and how you can build yours? Then you should read [this article](https://commercelayer.io/blog/how-to-build-an-international-ecommerce-website-with-sanity-and-commerce-layer) on our blog.
+<div align="center">
+  <a href="https://commercelayer.io">
+    <img src="https://data.commercelayer.app/assets/logos/glyph/black/commercelayer_glyph_black.svg" height="50" alt="Commerce Layer Logo">
+  </a>
+  <p><a href="https://commercelayer.io/why" target="_blank" rel="noopener noreferrer">Commerce Layer</a> is a multi-market commerce API and order management system that lets you add global shopping capabilities to any website, mobile app, chatbot, wearable, voice, or IoT device, with ease. Compose your stack with the best-of-breed tools you already mastered and love. Make any experience shoppable, anywhere, through a blazing-fast, enterprise-grade, and <a href="https://docs.commercelayer.io" target="_blank" rel="noopener noreferrer">secure API</a>.</p>
+</div>