Catalyst 536d9a8

.env.example

@@ -1,12 +1,22 @@
-# Shared env vars, used by all apps and api client
+# The hash visible in the subject store's URL when signed in to the store control panel.
+# The control panel URL is of the form `https://store-{hash}.mybigcommerce.com`. 
 BIGCOMMERCE_STORE_HASH=
+
+# The access token from a store-level API account. The only scope required to run Catalyst is Carts `read-only`.
+# See https://developer.bigcommerce.com/api-docs/getting-started/api-accounts#store-level-api-accounts
 BIGCOMMERCE_ACCESS_TOKEN=
+
+# A bearer token that authorizes server-to-server requests to the GraphQL Storefront API
+# See https://developer.bigcommerce.com/docs/rest-authentication/tokens/customer-impersonation-token
 BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN=
+
+# The channel ID for the Catalyst storefront's dedicated channel.
 BIGCOMMERCE_CHANNEL_ID=1
 
 # Set to true to allow the /admin route to redirect to the BigCommerce control panel.
 # `false` is recommended for production. Defaults to false when not specified.
 # You may also delete /admin/route.ts if you wish.
 ENABLE_ADMIN_ROUTE=true
 
-AUTH_SECRET= # Generate one typing `openssl rand -hex 32` in your terminal
+# Used by NextAuth, can be generated by running `openssl rand -hex 32` in your terminal.
+AUTH_SECRET=

.github/workflows/basic.yml

@@ -1,4 +1,4 @@
-name: Basic workflow
+name: Lint, Typecheck, GraphQL Codegen
 
 on:
   push:

.github/workflows/playwright.yml

@@ -34,7 +34,7 @@ jobs:
           PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
         run: |
           cd packages/functional
-          npx playwright test tests/visual-regression/reactant/components/ --project=tests-chromium 
+          npx playwright test tests/visual-regression/reactant/components/ --project=tests-chromium
 
       - uses: actions/upload-artifact@v3
         if: failure()

.gitignore

@@ -3,6 +3,8 @@ dist
 .turbo
 .vscode/**/*
 !.vscode/settings.example.json
+.idea
+.vercel
 .env
 .env*.local
 test-results/

README.md

@@ -3,12 +3,12 @@
 > [!WARNING]
 > - Catalyst is in development and should not be used in production environments.
 
-**Catalyst** is a composable, fully customizable headless storefront that offers a set of opinionated defaults. It is intended to fit the needs of modern developers, merchants, and shoppers. Catalyst is built with [Next.js (nextjs.org)](https://nextjs.org/) and uses our [React.js-based (react.dev)](https://react.dev/) **Reactant** storefront components.
+**Catalyst** is a composable, fully customizable headless storefront that offers a set of opinionated defaults. It is intended to fit the needs of modern developers, merchants, and shoppers. Catalyst is built with [Next.js (nextjs.org)](https://nextjs.org/) and uses our [React.js-based (react.dev)](https://react.dev/) storefront components.
 
 The Catalyst monorepo contains the following:
 
 * The core **Catalyst** Next.js storefront, in [apps/core](apps/core).
-* The **Reactant** storefront component library, in [packages/reactant](packages/reactant).
+* The storefront component library, in [packages/components](packages/components).
 * The BigCommerce [GraphQL Storefront API (BigCommerce Dev Center)](https://developer.bigcommerce.com/docs/graphql-storefront) client, in [packages/client](packages/client).
 
 ## Requirements
@@ -83,7 +83,7 @@ The `dev` script runs all packages and apps in watch mode. The following table l
 | Process | URL with port |
 |:--------|:--------------|
 | Core Catalyst storefront | http://localhost:3000 |
-| Reactant Storybook | http://localhost:6006 |
+| Components Storybook | http://localhost:6006 |
 
 Happy developing! Let us know how things are going in the dedicated Slack channel.
 

apps/core/.eslintrc.cjs

@@ -25,6 +25,8 @@ const config = {
         ],
       },
     ],
+    'check-file/filename-naming-convention': 'off',
+    'check-file/folder-naming-convention': 'off',
   },
 };
 

apps/core/README.md

@@ -1,6 +1,6 @@
 # Catalyst
 
-Catalyst is the next generation of storefronts at BigCommerce. It aims to be composable and powerful to meet the needs of our enterprise customers, exceeding performance of Stencil and Blueprint themes. Catalyst is built with [Next.js](https://nextjs.org/) using our React.js storefront component library called Reactant.
+Catalyst is the next generation of storefronts at BigCommerce. It aims to be composable and powerful to meet the needs of our enterprise customers, exceeding performance of Stencil and Blueprint themes. Catalyst is built with [Next.js](https://nextjs.org/) using our React.js storefront component library.
 
 ## Getting Started
 

apps/core/app/(default)/(faceted)/_components/breadcrumbs.tsx

@@ -1,8 +1,8 @@
 import {
   BreadcrumbDivider,
   BreadcrumbItem,
-  Breadcrumbs as ReactantBreadcrumbs,
-} from '@bigcommerce/reactant/Breadcrumbs';
+  Breadcrumbs as ComponentsBreadcrumbs,
+} from '@bigcommerce/components/Breadcrumbs';
 import { ChevronRight } from 'lucide-react';
 import { Fragment } from 'react';
 
@@ -18,7 +18,7 @@ interface Props {
 }
 
 export const Breadcrumbs = ({ breadcrumbs, category }: Props) => (
-  <ReactantBreadcrumbs className="py-4">
+  <ComponentsBreadcrumbs className="py-4">
     {breadcrumbs.map(({ name, entityId, path }, index) => {
       if (!path || breadcrumbs.length - 1 === index) {
         return (
@@ -39,5 +39,5 @@ export const Breadcrumbs = ({ breadcrumbs, category }: Props) => (
         </Fragment>
       );
     })}
-  </ReactantBreadcrumbs>
+  </ComponentsBreadcrumbs>
 );

apps/core/app/(default)/(faceted)/_components/facets.tsx

@@ -5,12 +5,12 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from '@bigcommerce/reactant/Accordion';
-import { Button } from '@bigcommerce/reactant/Button';
-import { Checkbox } from '@bigcommerce/reactant/Checkbox';
-import { Input } from '@bigcommerce/reactant/Input';
-import { Label } from '@bigcommerce/reactant/Label';
-import { Rating } from '@bigcommerce/reactant/Rating';
+} from '@bigcommerce/components/Accordion';
+import { Button } from '@bigcommerce/components/Button';
+import { Checkbox } from '@bigcommerce/components/Checkbox';
+import { Input } from '@bigcommerce/components/Input';
+import { Label } from '@bigcommerce/components/Label';
+import { Rating } from '@bigcommerce/components/Rating';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { FormEvent, useRef } from 'react';
 

apps/core/app/(default)/(faceted)/_components/mobile-side-nav.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 import {
   Sheet,
   SheetClose,
@@ -9,7 +9,7 @@ import {
   SheetOverlay,
   SheetTitle,
   SheetTrigger,
-} from '@bigcommerce/reactant/Sheet';
+} from '@bigcommerce/components/Sheet';
 import { Filter } from 'lucide-react';
 import { PropsWithChildren, useEffect, useState } from 'react';
 

apps/core/app/(default)/(faceted)/_components/refine-by.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Tag, TagAction, TagContent } from '@bigcommerce/reactant/Tag';
+import { Tag, TagAction, TagContent } from '@bigcommerce/components/Tag';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
 import type { Facet, PageType, PublicParamKeys } from '../types';

apps/core/app/(default)/(faceted)/_components/skeleton-ui.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from '@bigcommerce/reactant/Skeleton';
+import { Skeleton } from '@bigcommerce/components/Skeleton';
 
 export const SkeletonIU = () => (
   <div>

apps/core/app/(default)/(faceted)/_components/sort-by.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Select, SelectContent, SelectItem } from '@bigcommerce/reactant/Select';
+import { Select, SelectContent, SelectItem } from '@bigcommerce/components/Select';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
 export function SortBy() {

apps/core/app/(default)/(faceted)/brand/[slug]/static/page.tsx

@@ -0,0 +1,16 @@
+import { getBrands } from '~/client/queries/getBrands';
+
+import BrandPage from '../page';
+
+export default BrandPage;
+
+export async function generateStaticParams() {
+  const brands = await getBrands();
+
+  return brands.map((brand) => ({
+    slug: brand.entityId.toString(),
+  }));
+}
+
+export const dynamic = 'force-static';
+export const revalidate = 600;

apps/core/app/(default)/(faceted)/category/[slug]/static/page.tsx

@@ -0,0 +1,28 @@
+import { getCategoryTree } from '~/client/queries/getCategoryTree';
+import { ExistingResultType } from '~/client/util';
+
+import CategoryPage from '../page';
+
+export default CategoryPage;
+
+type Categories = ExistingResultType<typeof getCategoryTree>;
+type Category = Omit<Categories[number], 'children'> & { children?: Category[] };
+
+const getEntityIdsOfChildren = (categories: Category[] = []): number[] =>
+  categories.reduce<number[]>(
+    (acc, category) => acc.concat(category.entityId, getEntityIdsOfChildren(category.children)),
+    [],
+  );
+
+export async function generateStaticParams() {
+  const categories = await getCategoryTree();
+
+  const entityIds = getEntityIdsOfChildren(categories);
+
+  return entityIds.map((entityId) => ({
+    slug: entityId.toString(),
+  }));
+}
+
+export const dynamic = 'force-static';
+export const revalidate = 600;

apps/core/app/(default)/blog/[blogId]/page.tsx

@@ -4,8 +4,8 @@ import {
   BlogPostDate,
   BlogPostImage,
   BlogPostTitle,
-} from '@bigcommerce/reactant/BlogPostCard';
-import { Tag, TagContent } from '@bigcommerce/reactant/Tag';
+} from '@bigcommerce/components/BlogPostCard';
+import { Tag, TagContent } from '@bigcommerce/components/Tag';
 import type { Metadata } from 'next';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';

apps/core/app/(default)/cart/CartItemCounter.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Counter } from '@bigcommerce/reactant/Counter';
+import { Counter } from '@bigcommerce/components/Counter';
 import { useState } from 'react';
 
 import {
@@ -21,10 +21,13 @@ interface UpdateProductQuantityData extends CartLineItemInput {
 
 export const CartItemCounter = ({ itemData }: { itemData: CartItemData }) => {
   const { quantity, lineItemEntityId, productEntityId, variantEntityId } = itemData;
-  const [counterValue, setCounterValue] = useState(quantity);
+
+  const [counterValue, setCounterValue] = useState<'' | number>(quantity);
   const handleCountUpdate = async (value: string | number) => {
-    if (Number.isNaN(value)) {
-      setCounterValue(0);
+    if (value === '') {
+      setCounterValue(value);
+
+      return;
     }
 
     setCounterValue(Number(value));
@@ -40,6 +43,7 @@ export const CartItemCounter = ({ itemData }: { itemData: CartItemData }) => {
   return (
     <Counter
       className="w-32 text-base font-bold"
+      min={1}
       onChange={handleCountUpdate}
       value={counterValue}
     />

apps/core/app/(default)/cart/page.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 import { Trash2 as Trash } from 'lucide-react';
 import { cookies } from 'next/headers';
 import Image from 'next/image';

apps/core/app/(default)/compare/AddToCart.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Button } from '@bigcommerce/reactant/Button';
-import { ShoppingCart, Loader2 as Spinner } from 'lucide-react';
+import { Button } from '@bigcommerce/components/Button';
+import { Loader2 as Spinner } from 'lucide-react';
 import { useFormStatus } from 'react-dom';
 
 export const AddToCart = ({
@@ -21,10 +21,7 @@ export const AddToCart = ({
           <span className="sr-only">Processing...</span>
         </>
       ) : (
-        <>
-          <ShoppingCart aria-hidden="true" className="mx-2" />
-          <span>Add to Cart</span>
-        </>
+        'Add to cart'
       )}
     </Button>
   );

apps/core/app/(default)/compare/page.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@bigcommerce/reactant/Button';
-import { Rating } from '@bigcommerce/reactant/Rating';
+import { Button } from '@bigcommerce/components/Button';
+import { Rating } from '@bigcommerce/components/Rating';
 import Image from 'next/image';
 import * as z from 'zod';
 

apps/core/app/(default)/login/LoginForm.tsx

@@ -1,16 +1,16 @@
 'use client';
 
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 import {
   Field,
   FieldControl,
   FieldLabel,
   FieldMessage,
   Form,
   FormSubmit,
-} from '@bigcommerce/reactant/Form';
-import { Input } from '@bigcommerce/reactant/Input';
-import { Message } from '@bigcommerce/reactant/Message';
+} from '@bigcommerce/components/Form';
+import { Input } from '@bigcommerce/components/Input';
+import { Message } from '@bigcommerce/components/Message';
 import { Loader2 as Spinner } from 'lucide-react';
 import { ChangeEvent, useState } from 'react';
 import { useFormState, useFormStatus } from 'react-dom';

apps/core/app/(default)/login/page.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@bigcommerce/reactant/Button';
+import { Button } from '@bigcommerce/components/Button';
 
 import { Link } from '~/components/Link';
 

apps/core/app/(default)/product/[slug]/_components/Gallery.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import {
+  Gallery as ComponentsGallery,
   GalleryContent,
   GalleryControls,
   GalleryImage,
   GalleryThumbnail,
   GalleryThumbnailItem,
   GalleryThumbnailList,
-  Gallery as ReactantGallery,
-} from '@bigcommerce/reactant/Gallery';
+} from '@bigcommerce/components/Gallery';
 import Image from 'next/image';
 
 import { getProduct } from '~/client/queries/getProduct';
@@ -24,7 +24,7 @@ export const Gallery = ({ images }: Props) => {
   return (
     <div className="-mx-6 mb-10 sm:-mx-0 md:mb-12">
       <div className="lg:sticky lg:top-0">
-        <ReactantGallery defaultImageIndex={defaultImageIndex} images={images}>
+        <ComponentsGallery defaultImageIndex={defaultImageIndex} images={images}>
           <GalleryContent>
             <GalleryImage>
               {({ selectedImage }) =>
@@ -57,7 +57,7 @@ export const Gallery = ({ images }: Props) => {
               );
             })}
           </GalleryThumbnailList>
-        </ReactantGallery>
+        </ComponentsGallery>
       </div>
     </div>
   );

apps/core/app/(default)/product/[slug]/_components/ReviewSummary.tsx

@@ -1,4 +1,4 @@
-import { Rating } from '@bigcommerce/reactant/Rating';
+import { Rating } from '@bigcommerce/components/Rating';
 import { useId } from 'react';
 
 import { getProductReviews } from '~/client/queries/getProductReviews';

apps/core/app/(default)/product/[slug]/_components/Reviews.tsx

@@ -1,4 +1,4 @@
-import { Rating } from '@bigcommerce/reactant/Rating';
+import { Rating } from '@bigcommerce/components/Rating';
 
 import { getProductReviews } from '~/client/queries/getProductReviews';
 

apps/core/app/(default)/product/[slug]/loading.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from '@bigcommerce/reactant/Skeleton';
+import { Skeleton } from '@bigcommerce/components/Skeleton';
 
 export default function Loading() {
   return (