feat: ui changes

README.md

@@ -14,41 +14,14 @@ Run this command and let our CLI do the job or [see our documentation for manual
 $ yarn create commerce
 ```
 
-[See the live demo](https://blazity.com/r/commerce) or deploy it straight to Vercel:
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fblazity%2Fenterprise-commerce%2Ftree%2Fmain%2Fstarters%2Fshopify-algolia) - Shopify & Algolia starter
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fblazity%2Fenterprise-commerce%2Ftree%2Fmain%2Fstarters%2Fshopify-meilisearch) - Shopify & Meilsearch starter
-
-**Note:** To enable all features, ensure [required environment variables](https://docs.commerce.blazity.com/setup#manual) are set in your `.env.local`
-
-## Features
-
-- [Next.js App Router](https://nextjs.org/docs/app) & [Turborepo](https://turbo.build/repo)
-- [React Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components) (RSCs), [Suspense and Streaming](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming)
-- [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations)
-- [Dynamic OG Images](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image)
-- [AI Vector Search](https://www.meilisearch.com/docs/learn/experimental/vector_search)
-- [Lightning fast search & filtering](https://www.meilisearch.com/)
-- [Designed with v0](https://v0.dev/)
-- [Vercel Toolbar](https://vercel.com/docs/workflow-collaboration/vercel-toolbar) (feature flags, comments, deployment sharing, etc.)
-- AI Image captioning
-- Perfect Performance & SEO
-- Extremely strict TypeScript
-- Draft Mode
-- A/B Tests
-- Shadcn UI
-- TailwindCSS
-- Analytics (GTM, Vercel)
-- Highly Scalable SEO Redirects ([Bloom Filters](https://nextjs.org/docs/app/building-your-application/routing/redirecting#managing-redirects-at-scale-advanced))
-- Easy migration - migrate your existing solution in minutes
-- Playwright - write end-to-end tests like a pro
-- Storybook - create, test, and showcase your components
-- T3 Env - manage your environment variables with ease
-- Patch-package - fix external dependencies without losing your mind
-- Components coupling and cohesion graph - a tool for managing component relationships
-- Category Landing Page detached from Product Listing for fast SEO indexing & better performance
-- Reviews & Ratings with [Judge.me](https://judge.me/)
+[See the live demo](https://blazity.com/r/commerce)
+
+## Starters
+
+Each starter is a combination of commerce platform and search engine. While each starter follows very similar features crucial for every storefront, they may be different therefore we recommend checking the documentation for each starter.
+
+- [Shopify + Algolia Starter](https://github.com/Blazity/enterprise-commerce/tree/main/starters/shopify-algolia)
+- [Shopify + Meilisearch Starter](https://github.com/Blazity/enterprise-commerce/tree/main/starters/shopify-meilisearch)
 
 ## Architecture
 

starters/shopify-algolia/README.md

@@ -0,0 +1,92 @@
+🚀 Shopify + Algolia Starter for your next storefront
+
+Run this command and let our CLI do the job or [see our documentation for manual setup instruction](https://blazity.com/r/commerce-docs).
+
+```bash
+$ yarn create commerce
+```
+
+[See the live demo](https://blazity.com/r/commerce) or deploy it straight to Vercel:
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fblazity%2Fenterprise-commerce%2Ftree%2Fmain%2Fstarters%2Fshopify-algolia)
+
+**Note:** To enable all features, ensure [required environment variables](https://docs.commerce.blazity.com/providers) are set in your `.env.local`
+
+## Features
+
+- [Next.js App Router](https://nextjs.org/docs/app) & [Turborepo](https://turbo.build/repo)
+- [React Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components) (RSCs), [Suspense and Streaming](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming)
+- [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations)
+- [Dynamic OG Images](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image)
+- [AI Product recommendations](https://www.algolia.com/doc/guides/algolia-recommend/overview/)
+- [Lightning fast search & filtering](https://www.algolia.com/)
+- [Designed with v0](https://v0.dev/)
+- [Vercel Toolbar](https://vercel.com/docs/workflow-collaboration/vercel-toolbar) (feature flags, comments, deployment sharing, etc.)
+- AI Image captioning
+- Perfect Performance & SEO
+- Draft Mode
+- A/B Tests
+- Shadcn UI
+- TailwindCSS
+- Analytics (GTM, Vercel)
+- Highly Scalable SEO Redirects ([Bloom Filters](https://nextjs.org/docs/app/building-your-application/routing/redirecting#managing-redirects-at-scale-advanced))
+- Easy migration - migrate your existing solution in minutes
+- Playwright - write end-to-end tests like a pro
+- Storybook - create, test, and showcase your components
+- T3 Env - manage your environment variables with ease
+- Patch-package - fix external dependencies without losing your mind
+- Components coupling and cohesion graph - a tool for managing component relationships
+- Category Landing Page detached from Product Listing for fast SEO indexing & better performance
+- Reviews & Ratings [Judge.me](https://judge.me/)
+
+## Architecture
+
+In Enterprise Commerce high-level architecture, Search Engine serves as the primary source for all product data and potentially other types of data in the future. The system is designed to easily integrate AI personalization tools without needing to modify any frontend code. While we are integrated with Shopify by default, we are not tightly bound to it, you can use any commerce platform and adapt data to our format.
+
+<img width="1841" alt="architecture diagram" src="https://github.com/Blazity/enterprise-commerce/assets/28964599/c5d3a0b3-6c3e-47df-9c45-4ecb583f5a64">
+
+## Performance
+
+At Blazity, we prioritize speed. Enterprise Commerce is meticulously crafted to deliver top-notch performance for your online store.
+
+Lighthouse scores offer a valuable comparison tool, but they don’t directly translate to SEO or user experience (UX).
+For a true picture, prioritize real user data. Tools like CrUX or Vercel Speed Insights provide user-based performance metrics, ensuring your online store delivers a seamless experience for your customers.
+
+![performance diagram](https://github.com/Blazity/enterprise-commerce/assets/28964599/8aba9b68-38d6-41c9-81a8-234003e7e1b0)
+
+## 🤝 Contribution
+
+Contributions are always welcome! To contribute, please follow these steps:
+
+1. Fork the repository.
+2. Create a new branch with a descriptive name.
+3. Make your changes, and commit them using the [Conventional Commits](https://www.conventionalcommits.org/) format.
+4. Push your changes to the forked repository.
+5. Create a pull request, and we'll review your changes.
+
+## Support
+
+If you're looking for help or simply want to share your thoughts about the project, we encourage you to join our Discord community. Here's the link: [https://blazity.com/discord](https://blazity.com/discord). It's a space where we exchange ideas and help one another. Everyone's input is appreciated, and we look forward to welcoming you.
+
+<br />
+<a href="https://discord.gg/fyWtyNKmfX" style="width: 100%; display: flex; justify-content: center;">
+  <img src="https://discordapp.com/api/guilds/1111676875782234175/widget.png?style=banner2" alt="Blazity Discord Banner"/>
+</a>
+<br />
+
+## 📜 License
+
+This project is licensed under the MIT License. For more information, see the [LICENSE](./LICENSE) file.
+
+[check-workflow-badge]: https://img.shields.io/github/actions/workflow/status/blazity/enterprise-commerce/check.yml?label=check
+[github-license-badge]: https://img.shields.io/github/license/blazity/enterprise-commerce?link=https%3A%2F%2Fgithub.com%2FBlazity%2Fenterprise-commerce%2Fblob%2Fmain%2FLICENSE
+[github-contributors-badge]: https://img.shields.io/github/contributors/blazity/enterprise-commerce?link=https%3A%2F%2Fgithub.com%2FBlazity%2Fenterprise-commerce%2Fgraphs%2Fcontributors
+[discord-badge]: https://img.shields.io/discord/1111676875782234175?color=7b8dcd&link=https%3A%2F%2Fblazity.com%2Fdiscord
+[made-by-blazity-badge]: https://img.shields.io/badge/made_by-Blazity-blue?color=FF782B&link=https://blazity.com/
+[made-with-v0-badge]: https://img.shields.io/badge/designed_with-v0-red?color=black&link=https://blazity.com/
+[check-workflow-badge-link]: https://github.com/Blazity/enterprise-commerce/actions/workflows/check.yml
+[github-license-badge-link]: https://github.com/Blazity/enterprise-commerce/blob/main/LICENSE
+[github-contributors-badge-link]: https://github.com/Blazity/enterprise-commerce/graphs/contributors
+[discord-badge-link]: https://blazity.com/discord
+[made-by-blazity-badge-link]: https://blazity.com/?utm_source=nextenterprise&utm_medium=github
+[made-with-v0-link]: https://v0.dev/

starters/shopify-algolia/app/actions/cart.actions.ts

@@ -2,9 +2,9 @@
 
 import { revalidateTag, unstable_cache } from "next/cache"
 import { cookies } from "next/headers"
-import { storefrontClient } from "clients/storefrontClient"
+import { storefrontClient } from "clients/storefront"
 import { COOKIE_CART_ID, TAGS } from "constants/index"
-import { isDemoMode } from "utils/demoUtils"
+import { isDemoMode } from "utils/demo-utils"
 
 export const getCart = unstable_cache(async (cartId: string) => storefrontClient.getCart(cartId), [TAGS.CART], { revalidate: 60 * 15, tags: [TAGS.CART] })
 

starters/shopify-algolia/app/actions/collection.actions.ts

@@ -2,7 +2,7 @@
 
 import { unstable_cache } from "next/cache"
 import { algolia } from "clients/search"
-import { getDemoSingleCategory, isDemoMode } from "utils/demoUtils"
+import { getDemoSingleCategory, isDemoMode } from "utils/demo-utils"
 import type { PlatformCollection } from "lib/shopify/types"
 import { env } from "env.mjs"
 

starters/shopify-algolia/app/actions/page.actions.ts

@@ -1,6 +1,6 @@
 "use server"
 
-import { storefrontClient } from "clients/storefrontClient"
+import { storefrontClient } from "clients/storefront"
 import { unstable_cache } from "next/cache"
 
 export const getPage = unstable_cache(async (handle: string) => await storefrontClient.getPage(handle), ["page"], { revalidate: 3600 })

starters/shopify-algolia/app/actions/product.actions.ts

@@ -6,7 +6,7 @@ import { env } from "env.mjs"
 import { algolia } from "clients/search"
 import type { Review } from "lib/reviews/types"
 
-import { getDemoProductReviews, getDemoSingleProduct, isDemoMode } from "utils/demoUtils"
+import { getDemoProductReviews, getDemoSingleProduct, isDemoMode } from "utils/demo-utils"
 import type { CommerceProduct } from "types"
 import { notifyOptIn } from "utils/opt-in"
 

starters/shopify-algolia/app/actions/user.actions.ts

@@ -2,7 +2,7 @@
 
 import { PlatformUserCreateInput } from "lib/shopify/types"
 import { cookies } from "next/headers"
-import { storefrontClient } from "clients/storefrontClient"
+import { storefrontClient } from "clients/storefront"
 import { COOKIE_ACCESS_TOKEN } from "constants/index"
 
 export async function signupUser({ email, password }: { email: string; password: string }) {

starters/shopify-algolia/app/api/feed/sync/route.ts

@@ -1,6 +1,6 @@
 import type { PlatformProduct } from "lib/shopify/types"
 import { algolia } from "clients/search"
-import { storefrontClient } from "clients/storefrontClient"
+import { storefrontClient } from "clients/storefront"
 import { env } from "env.mjs"
 import { compareHmac } from "utils/compare-hmac"
 import { enrichProduct } from "utils/enrich-product"

starters/shopify-algolia/app/api/reviews/ai-summary/route.ts

@@ -8,7 +8,7 @@ import { env } from "env.mjs"
 import { authenticate } from "utils/authenticate-api-route"
 import { isOptIn, notifyOptIn } from "utils/opt-in"
 import { unstable_noStore } from "next/cache"
-import { isDemoMode } from "utils/demoUtils"
+import { isDemoMode } from "utils/demo-utils"
 
 const summarySchema = z.object({
   products: z.array(

starters/shopify-algolia/app/api/reviews/sync/route.ts

@@ -6,7 +6,7 @@ import { authenticate } from "utils/authenticate-api-route"
 import { isOptIn, notifyOptIn } from "utils/opt-in"
 import type { Review } from "lib/reviews/types"
 import type { CommerceProduct } from "types"
-import { isDemoMode } from "utils/demoUtils"
+import { isDemoMode } from "utils/demo-utils"
 
 export const maxDuration = 60
 

starters/shopify-algolia/app/category/clp/[slug]/[page]/page.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next"
-import { CategoryView } from "views/Category/CategoryView"
+import { CategoryView } from "views/category/category-view"
 
 export const revalidate = 86400
 export const dynamic = "force-static"

starters/shopify-algolia/app/category/clp/[slug]/page.tsx

@@ -2,8 +2,8 @@ import { PlatformCollection } from "lib/shopify/types"
 import { algolia } from "clients/search"
 import { env } from "env.mjs"
 import type { Metadata } from "next"
-import { isDemoMode } from "utils/demoUtils"
-import { CategoryView } from "views/Category/CategoryView"
+import { isDemoMode } from "utils/demo-utils"
+import { CategoryView } from "views/category/category-view"
 
 export const revalidate = 86400
 export const dynamic = "force-static"

starters/shopify-algolia/app/category/plp/[slug]/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next"
 import { SearchParamsType } from "types"
-import { CategoryView } from "views/Category/CategoryView"
+import { CategoryView } from "views/category/category-view"
 
 export const runtime = "nodejs"
 

starters/shopify-algolia/app/error.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { Button } from "components/Button/Button"
-import { isDemoMode } from "utils/demoUtils"
+import { Button } from "components/ui/button-old"
+import { isDemoMode } from "utils/demo-utils"
 
 export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   return (

starters/shopify-algolia/app/favorites/page.tsx

@@ -1,8 +1,8 @@
 import { cookies } from "next/headers"
 import { Suspense } from "react"
 import { getProduct } from "app/actions/product.actions"
-import { ProductCard } from "components/ProductCard/ProductCard"
-import { Skeleton } from "components/Skeleton/Skeleton"
+import { ProductCard } from "components/product-card"
+import { Skeleton } from "components/ui/skeleton"
 import { COOKIE_FAVORITES } from "constants/index"
 
 export const revalidate = 86400

starters/shopify-algolia/app/global-error.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Button } from "components/Button/Button"
+import { Button } from "components/ui/button-old"
 
 export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   return (

starters/shopify-algolia/app/home/[bucket]/page.tsx

@@ -1,11 +1,11 @@
 import { Suspense } from "react"
 import { BUCKETS } from "constants/index"
-import { BestOffersSection } from "views/Homepage/BestOffersSection"
-import { CarouselSectionSkeleton } from "views/Homepage/CarouselSection"
-import { CategoriesSection, CategoriesSectionSkeleton } from "views/Homepage/CategoriesSection"
-import { EverythingUnderSection } from "views/Homepage/EverythingUnderSection"
-import { AnnouncementBar } from "components/AnnouncementBar/AnnouncementBar"
-import { HeroSection } from "views/Homepage/HeroSection"
+import { BestOffersSection } from "views/homepage/best-offers-skeleton"
+import { CarouselSectionSkeleton } from "views/homepage/carousel-section"
+import { CategoriesSection, CategoriesSectionSkeleton } from "views/homepage/categories-section"
+import { EverythingUnderSection } from "views/homepage/everything-under-section"
+import { AnnouncementBar } from "components/announcement-bar"
+import { HeroSection } from "views/homepage/hero-section"
 
 export const revalidate = 86400
 

starters/shopify-algolia/app/layout.tsx

@@ -4,21 +4,21 @@ import nextDynamic from "next/dynamic"
 import Script from "next/script"
 import { Suspense } from "react"
 import { Toaster } from "sonner"
-import { CallToAction } from "components/CallToAction/CallToAction"
-import { Footer } from "components/Footer/Footer"
-import { Modals } from "components/Modals/Modals"
-import { mobileInlineScript } from "components/NavigationBar/mobileInlineScript"
-import { NavigationBar } from "components/NavigationBar/NavigationBar"
-import { NavItem } from "components/NavigationBar/types"
-import { FlagValues } from "views/FlagValues"
-import { ThirdParties } from "views/ThirdParties"
+import { CallToAction } from "components/call-to-action"
+import { Footer } from "components/footer"
+import { Modals } from "components/modals/modals"
+import { mobileInlineScript } from "components/navigation-bar/mobile-inline-script"
+import { NavigationBar } from "components/navigation-bar/navigation-bar"
+import type { NavItem } from "components/navigation-bar/types"
+import { FlagValues } from "views/flag-values"
+import { ThirdParties } from "views/third-parties"
 import { env } from "env.mjs"
 import { Metadata } from "next"
-import { GithubBadge } from "views/GithubBadge"
-import { DemoModeAlert } from "views/DemoModeAlert"
-import { CartView } from "views/Cart/CartView"
+import { GithubBadge } from "views/github-badge"
+import { DemoModeAlert } from "views/demo-mode-alert"
+import { CartView } from "views/cart/cart-view"
 
-const DraftToolbar = nextDynamic(() => import("views/DraftToolbar"), { ssr: false })
+const DraftToolbar = nextDynamic(() => import("views/draft-toolbar"), { ssr: false })
 
 export const revalidate = 86400
 

starters/shopify-algolia/app/product/[slug]/draft/page.tsx

@@ -1,22 +1,22 @@
 import { unstable_cache } from "next/cache"
 import { draftMode } from "next/headers"
 import { notFound } from "next/navigation"
-import { storefrontClient } from "clients/storefrontClient"
+import { storefrontClient } from "clients/storefront"
 import type { CommerceProduct } from "types"
 
-import { Breadcrumbs } from "components/Breadcrumbs/Breadcrumbs"
+import { Breadcrumbs } from "components/breadcrumbs"
 
 import type { PlatformProduct } from "lib/shopify/types"
-import { getCombination, getOptionsFromUrl, hasValidOption, removeOptionsFromUrl } from "utils/productOptionsUtils"
-import { BackButton } from "views/Product/BackButton"
-import { VariantsSection } from "views/Product/VariantsSection"
-import { ProductTitle } from "views/Product/ProductTitle"
-import { CurrencyType, mapCurrencyToSign } from "utils/mapCurrencyToSign"
-import { ProductImages } from "views/Product/ProductImages"
-import { RightSection } from "views/Product/RightSection"
-import { AddToCartButton } from "views/Product/AddToCartButton"
-import { FavoriteMarker } from "views/Product/FavoriteMarker"
-import { FaqSection } from "views/Product/FaqSection"
+import { getCombination, getOptionsFromUrl, hasValidOption, removeOptionsFromUrl } from "utils/product-options-utils"
+import { BackButton } from "views/product/back-button"
+import { VariantsSection } from "views/product/variants-section"
+import { ProductTitle } from "views/product/product-title"
+import { CurrencyType, mapCurrencyToSign } from "utils/map-currency-to-sign"
+import { ProductImages } from "views/product/product-images"
+import { RightSection } from "views/product/right-section"
+import { AddToCartButton } from "views/product/add-to-cart-button"
+import { FavoriteMarker } from "views/product/favorite-marker"
+import { FaqSection } from "views/product/faq-section"
 
 import { slugToName } from "utils/slug-name"
 

starters/shopify-algolia/app/product/[slug]/loading.tsx

@@ -1,4 +1,4 @@
-import { PageSkeleton } from "views/Product/PageSkeleton"
+import { PageSkeleton } from "views/product/page-skeleton"
 
 export default function Loading() {
   return <PageSkeleton />

starters/shopify-algolia/app/product/[slug]/metadata.ts

@@ -2,8 +2,8 @@ import { Metadata } from "next"
 import { Product, WithContext } from "schema-dts"
 import { getProduct } from "app/actions/product.actions"
 import { env } from "env.mjs"
-import { makeKeywords } from "utils/makeKeywords"
-import { removeOptionsFromUrl } from "utils/productOptionsUtils"
+import { makeKeywords } from "utils/make-keywords"
+import { removeOptionsFromUrl } from "utils/product-options-utils"
 import type { CommerceProduct } from "types"
 import { slugToName } from "utils/slug-name"
 

starters/shopify-algolia/app/product/[slug]/opengraph-image.tsx

@@ -3,7 +3,7 @@
 
 import { ImageResponse } from "next/og"
 import { getProduct } from "app/actions/product.actions"
-import { removeOptionsFromUrl } from "utils/productOptionsUtils"
+import { removeOptionsFromUrl } from "utils/product-options-utils"
 import { env } from "env.mjs"
 
 export const revalidate = 86400