Skip to content

Commit

Permalink
style: run linting on existing files
Browse files Browse the repository at this point in the history
  • Loading branch information
alexcanessa committed Feb 13, 2024
1 parent a7b167f commit 4ad56df
Show file tree
Hide file tree
Showing 12 changed files with 6,864 additions and 3,183 deletions.
32 changes: 14 additions & 18 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,34 @@
# [1.4.0](https://github.com/commercelayer/commercelayer-sanity-template/compare/v1.3.0...v1.4.0) (2023-07-13)


### Features

* cleanup code and update UI ([6e4e402](https://github.com/commercelayer/commercelayer-sanity-template/commit/6e4e402630a5ab35cb10d327eb23442b51ce812e))
- cleanup code and update UI ([6e4e402](https://github.com/commercelayer/commercelayer-sanity-template/commit/6e4e402630a5ab35cb10d327eb23442b51ce812e))

# [1.3.0](https://github.com/commercelayer/commercelayer-sanity-template/compare/v1.2.0...v1.3.0) (2023-03-23)


### Features

* 🎸 add header card to template UI ([ace1227](https://github.com/commercelayer/commercelayer-sanity-template/commit/ace122739c7a3fa5268b9e87b7f8528a95bcabc9))
* 🎸 update hero description ([dd6f8d8](https://github.com/commercelayer/commercelayer-sanity-template/commit/dd6f8d8e81de94ae4c00013c03766995982dd52c))
- 🎸 add header card to template UI ([ace1227](https://github.com/commercelayer/commercelayer-sanity-template/commit/ace122739c7a3fa5268b9e87b7f8528a95bcabc9))
- 🎸 update hero description ([dd6f8d8](https://github.com/commercelayer/commercelayer-sanity-template/commit/dd6f8d8e81de94ae4c00013c03766995982dd52c))

# [1.2.0](https://github.com/commercelayer/sanity-template-commercelayer/compare/v1.1.0...v1.2.0) (2023-02-17)


### Bug Fixes

* 🐛 add apiVersion to sanityClient ([3df0c1f](https://github.com/commercelayer/sanity-template-commercelayer/commit/3df0c1f7bc2e9bf00ae36c938eabc992ca8b00f4))
* 🐛 autoprefixer: color-adjust deprecation ([f9087e5](https://github.com/commercelayer/sanity-template-commercelayer/commit/f9087e5e5523f678625499331eb351eb640ab380))
* 🐛 improve lighthouse ([85d5d92](https://github.com/commercelayer/sanity-template-commercelayer/commit/85d5d92dd75102657071e6e9b7c482256d9c81c9))
* 🐛 lighthouse issues ([241ace0](https://github.com/commercelayer/sanity-template-commercelayer/commit/241ace020773dc972bbcaadc3a1d55d2ad871d2b))
* 🐛 remove postbuild script ([9e1f5e6](https://github.com/commercelayer/sanity-template-commercelayer/commit/9e1f5e6bfad8631ec5d4caca071fde1c9b3f6c3d))

- 🐛 add apiVersion to sanityClient ([3df0c1f](https://github.com/commercelayer/sanity-template-commercelayer/commit/3df0c1f7bc2e9bf00ae36c938eabc992ca8b00f4))
- 🐛 autoprefixer: color-adjust deprecation ([f9087e5](https://github.com/commercelayer/sanity-template-commercelayer/commit/f9087e5e5523f678625499331eb351eb640ab380))
- 🐛 improve lighthouse ([85d5d92](https://github.com/commercelayer/sanity-template-commercelayer/commit/85d5d92dd75102657071e6e9b7c482256d9c81c9))
- 🐛 lighthouse issues ([241ace0](https://github.com/commercelayer/sanity-template-commercelayer/commit/241ace020773dc972bbcaadc3a1d55d2ad871d2b))
- 🐛 remove postbuild script ([9e1f5e6](https://github.com/commercelayer/sanity-template-commercelayer/commit/9e1f5e6bfad8631ec5d4caca071fde1c9b3f6c3d))

### Features

* 🎸 add french locale (sanity and UI) ([4afc448](https://github.com/commercelayer/sanity-template-commercelayer/commit/4afc4486ec641d28d4cb824e2ea9f4929fd5a3fd))
* 🎸 add SEO component ([852fd43](https://github.com/commercelayer/sanity-template-commercelayer/commit/852fd43e9464d1107e1cdb5ded5d1991193cbfac))
* 🎸 add SKU code to product page ([e8a44c0](https://github.com/commercelayer/sanity-template-commercelayer/commit/e8a44c04ad4478d6f175a0638ad5d5908c0ae184))
* 🎸 export latest sanity data ([7290d73](https://github.com/commercelayer/sanity-template-commercelayer/commit/7290d7387a89ef33e9a56dd03ca29ac471bf8c8c))
* 🎸 upgrade to React18 and Next13 ([66645ce](https://github.com/commercelayer/sanity-template-commercelayer/commit/66645ce7ad3821a6bb77814e6fe3e2186b55cf07))
* 🎸 upgrade to sanity studio v3 ([c85f09d](https://github.com/commercelayer/sanity-template-commercelayer/commit/c85f09d0ce39392b509acd8c42a78f69f8a120ea))
- 🎸 add french locale (sanity and UI) ([4afc448](https://github.com/commercelayer/sanity-template-commercelayer/commit/4afc4486ec641d28d4cb824e2ea9f4929fd5a3fd))
- 🎸 add SEO component ([852fd43](https://github.com/commercelayer/sanity-template-commercelayer/commit/852fd43e9464d1107e1cdb5ded5d1991193cbfac))
- 🎸 add SKU code to product page ([e8a44c0](https://github.com/commercelayer/sanity-template-commercelayer/commit/e8a44c04ad4478d6f175a0638ad5d5908c0ae184))
- 🎸 export latest sanity data ([7290d73](https://github.com/commercelayer/sanity-template-commercelayer/commit/7290d7387a89ef33e9a56dd03ca29ac471bf8c8c))
- 🎸 upgrade to React18 and Next13 ([66645ce](https://github.com/commercelayer/sanity-template-commercelayer/commit/66645ce7ad3821a6bb77814e6fe3e2186b55cf07))
- 🎸 upgrade to sanity studio v3 ([c85f09d](https://github.com/commercelayer/sanity-template-commercelayer/commit/c85f09d0ce39392b509acd8c42a78f69f8a120ea))

# [1.1.0](https://github.com/commercelayer/sanity-template-commercelayer/compare/v1.0.1...v1.1.0) (2022-05-31)

Expand Down
66 changes: 33 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,28 +38,28 @@ Want to learn more about how we built the first version of this template and how
- Comprehensive installation and usage documentation.
- One-click deployment configuration to Netlify.

| [Storefront](https://commercelayer-sanity-template.netlify.app) (`/` page) | [Sanity studio](https://commercelayer-sanity-template.netlify.app/studio) (`/studio` page) |
| ----------------------------------------- | ------------------------------ |
| [![A preview image showing the Commerce Layer dashboard.](./public/ui-preview.png)](https://commercelayer-sanity-template.netlify.app) | [![A preview image showing the Sanity studio.](./public/sanity-preview.png)](https://commercelayer-sanity-template.netlify.app/studio) |
| [Storefront](https://commercelayer-sanity-template.netlify.app) (`/` page) | [Sanity studio](https://commercelayer-sanity-template.netlify.app/studio) (`/studio` page) |
| -------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| [![A preview image showing the Commerce Layer dashboard.](./public/ui-preview.png)](https://commercelayer-sanity-template.netlify.app) | [![A preview image showing the Sanity studio.](./public/sanity-preview.png)](https://commercelayer-sanity-template.netlify.app/studio) |

## Important Files and Folders

| **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). |
| `/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. |
| **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). |
| `/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

Expand All @@ -73,18 +73,18 @@ The quickest way to get up and running is to use the deploy button below to set

2. Rename the `/env.local.example` file to `.env.local` and add the following credentials:

| **Variable** | **Description** |
| ------------------------------------ | ----------------------------------- |
| `BUILD_LANGUAGES` | The supported locales (the default is `en-US, it-IT, fr-FR`). |
| `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).|
| `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)). |
| `NEXT_PUBLIC_SANITY_API_VERSION` | Sanity API version in the ISO date format, e.g `2022-02-15` (you can learn more about this in [Sanity docs](https://www.sanity.io/help/js-client-api-version)). |
| `NEXT_PUBLIC_SANITY_TOKEN` | Sanity API token (you can get this from [sanity.io/manage](https://sanity.io/manage)). |
| **Variable** | **Description** |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `BUILD_LANGUAGES` | The supported locales (the default is `en-US, it-IT, fr-FR`). |
| `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). |
| `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)). |
| `NEXT_PUBLIC_SANITY_API_VERSION` | Sanity API version in the ISO date format, e.g `2022-02-15` (you can learn more about this in [Sanity docs](https://www.sanity.io/help/js-client-api-version)). |
| `NEXT_PUBLIC_SANITY_TOKEN` | Sanity API token (you can get this from [sanity.io/manage](https://sanity.io/manage)). |

3. Run the command below to install the required dependencies:

Expand Down Expand Up @@ -172,8 +172,8 @@ sanity dataset import ./data/<name of extracted folder>/data.ndjson <your_datase
>
> So, when you seed your Commerce Layer organization, some markets will be created with a different market ID from the one imported into Sanity. Hence, you will need to fetch the valid market scope's number (4 digits) from the sales channel tab of your organization in the [Commerce Layer dashboard](https://dashboard.commercelayer.io) and update the appropriate country model in Sanity. For example, the Europe Market on Commerce Layer and Italy country model on Sanity. Failure to do this will result in an invalid scope authentication error when you try to access the storefront.
| Commerce Layer dashboard (sales channel tab) | Sanity studio (country model schema) |
| ---- | ---- |
| Commerce Layer dashboard (sales channel tab) | Sanity studio (country model schema) |
| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| ![A preview image showing the Commerce Layer dashboard.](./public/cl-screen.png) | ![A preview image showing the sanity studio.](./public/sanity-screen.png) |

> **Warning**
Expand Down
25 changes: 21 additions & 4 deletions components/CountrySelector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@ const CountrySelector: React.FC<Props> = ({ options }) => {
className="relative w-full bg-white border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-black focus:border-black sm:text-sm"
>
<span className="flex items-center">
<span className="flex-shrink-0 text-gray-700 truncate">{locale[lang as string].shippingTo}: </span>
<span className="flex-shrink-0 text-gray-700 truncate">
{locale[lang as string].shippingTo}:{" "}
</span>
<Image
src={selectedOption?.image?.url as string}
alt={selectedOption?.name as string}
Expand All @@ -67,7 +69,12 @@ const CountrySelector: React.FC<Props> = ({ options }) => {
</span>
</button>

<Transition show={show} leave="transition ease-in duration-100" leaveFrom="opacity-100" leaveTo="opacity-0">
<Transition
show={show}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div
className={`absolute mt-1 w-full rounded-md bg-white shadow-lg ${show ? "z-10" : ""}`}
onMouseLeave={() => setShow(false)}
Expand All @@ -93,8 +100,18 @@ const CountrySelector: React.FC<Props> = ({ options }) => {
onClick={() => handleChange(value, defaultLocale)}
>
<div className="flex items-center">
<Image src={image.url} alt={name} className="flex-shrink-0 w-6" width={200} height={50} />
<span className={`${selected ? "font-semibold" : "font-normal"} ml-3 block font-normal truncate`}>
<Image
src={image.url}
alt={name}
className="flex-shrink-0 w-6"
width={200}
height={50}
/>
<span
className={`${
selected ? "font-semibold" : "font-normal"
} ml-3 block font-normal truncate`}
>
{name}
</span>
</div>
Expand Down
Loading

0 comments on commit 4ad56df

Please sign in to comment.