feat(core): integrate Soul vibe (#1852)

* chore(core): use next canary and enable ppr * fix: use suggested functions over deprecated ones * chore(core): update tailwind config and layout to use Soul config * fix: eslint issues * chore(core): add roboto mono font * chore(core): add @/vibes/* path in tsconfig * feat(core): add FeaturedProductsList component and use in Homepage (#1673) * feat(core): add FeaturedProductsCarousel and use in Homepage (#1675) * feat(core): add best selling products to Hompage (#1676) * chore: bump components to include latest Streamable util (#1681) * chore(core): use next canary and enable ppr * feat: replace catalyst homepage slideshow * refactor: updated slideshow structure based on PR feedback * feat: add translations for homepage slider * fix: slide not in view when element inside is focused (#1687) * chore(core): use next canary and enable ppr * fix: use suggested functions over deprecated ones * chore(core): update tailwind config and layout to use Soul config * fix: eslint issues * chore(core): add roboto mono font * chore(core): add @/vibes/* path in tsconfig * feat(core): add FeaturedProductsList component and use in Homepage (#1673) * feat(core): add FeaturedProductsCarousel and use in Homepage (#1675) * feat(core): add best selling products to Hompage (#1676) * chore: bump components to include latest Streamable util (#1681) * chore(core): use next canary and enable ppr * feat: replace catalyst homepage slideshow * refactor: updated slideshow structure based on PR feedback * feat: add translations for homepage slider * fix: slide not in view when element inside is focused --------- Co-authored-by: Jorge Moya <[email protected]> * feat: add header (#1702) * feat: add soul SignInSection * refactor: ErrorMessage -> FieldError * feat: add form status * feat: add error message for sign in * fix: remove nextjs internals for redirect error handling * fix: add back metadata request locale * feat: add footer with streamable sitemap links (#1698) * fix: import Image instead of BcImage (#1719) * fix: form status bg color * feat: update forgot password to soul * refactor: nest lastResult in forgotPassword action * fix: inline recaptcha fragment in ResetPageQuery * feat: remove bestselling products from Home (#1725) * feat(core): add subscribe form to Homepage (#1682) * feat: stream in products for carousel/featured in Home (#1726) * feat: add empty state to FeaturedProductsCarousel (#1731) * chore: run pnpm lint -- --fix (#1736) * fix: bump VIBES components and pass in accessibility props in Home (#1739) * feat: add empty state for FeatureProductsList (#1745) * feat: add logout route handler * feat: add dynamic form primitive * feat: update sign up form to soul * fix: lint issues * fix: register customer required fields * refactor: use zod to parse register customer input * fix: sync dynamic form with VIBES * fix: remove quantity from dynamic form * fix: htmlFor in groups * feat: update Breadcrumbs to use AnimatedLink and new skeleton design (#1754) * feat: update change password to SOUL * feat: update button props and variables * feat: add search functionality to header * fix: change quick search param name to "term" This matches what the search page expects. * chore: bring in latest VIBES changes * feat: use header search translated error message * feat: don't attempt to search if less than 3 chars * chore: bring in latest VIBES changes * feat: better i18n for header search * feat(soul): add account layout components * chore: remove static pages (#1762) * chore: remove edge runtime from pages (#1763) * chore: bring in latet VIBES changes * feat: use Soul in category page * feat: add imagePriority prop to ProductCard (#1767) * fix: move font variables to html element * feat: add props and css variables for slideshow * feat: add props and css variables for carousel * feat: add CSS variables to ProductCard * chore: sync navigation primitive with VIBES * chore: add Makeswift team to CODEOWNERS * feat: add BlogPostContent to blog/[id] page * refactor: move default css variables into Accordion * refactor: move default css variables into Button, ButtonLink * refactor: move default css variables into Carousel * refactor: move default css variables into Slideshow * feat: add props to ProductsCarousel * feat(core): add account settings soul components * feat: add FeaturedBlogPostList to /blog * feat: add variables to Navigation * feat: add variables to StickySidebarLayout * feat: add props to ProductList * feat: add variables to banner/header * feat: use FeaturedBlogPostList in /blog/tag/ route * feat: add footer variables and logo * feat: add localized contact title * feat: add ProductDetails to PDP (#1751) * fix: section max width * feat: add pagination and breadcrumbs to /blog and /blog/tag/[tagId] * feat: refactor ProductListSection breadcrumbs * feat: sync breadcrumbs and implementations with vibes * feat: undo ProductListSection breadcrumb change to ensure it's not displayed for 1 breadcrumb * feat: update pageInfoTransformer * feat: add related products to PDP (#1788) * feat: add reviews to PDP (#1786) * fix: ensure page info transformer returns null if no previous/next page * feat: add product description to PDP (#1790) * feat: Soul ProductsListSection for search results * feat: add support for custom blog url routing, update blog tag filtering, delete /blog/tag/[tagId] route * feat: add empty state to BlogPostList * refactor: move app fonts from the root layout to their own file * feat: update /blog/[blogId] route to use skeleton and streamable props * feat: use Soul in brand page * refactor: move search params cache to category page * refactor: move search params cache to search page * feat: Add NotFound section to 404 page * fix: aria-label and placeholder in Select * fix: pass placeholder prop from ProductsListSection into Sorting * fix: rendering or label and placeholder props * chore: bring latest ProducstListSection from VIBES * feat: add height prop to Logo * feat: add FeaturedProductsCarousel to 404 page * fix: use grid for pdp specifications * fix: reduce gap on pdp * chore: bring in latest changes from Soul VIBE * feat: handle localization for new PLP labels * fix: facets transformer range input mapping * feat: add cart from VIBES * feat: replace cart with VIBES cart * fix: remove empty string in value (#1832) * chore: bring in latest changes from VIBES * feat: show sub-categories * chore: revert nextjs (#1840) * fix: remove regression tests workflow (#1843) * feat: add Error page and ErrorBoundary * feat(orders): update the orders list to use vibes section * chore: remove unused files in facet pages (#1838) * fix: add missing labels to number input (#1855) * chore: upgrade next to 15.1.1-canary.26 Next.js renamed expireTag and expirePath to unstable_ * chore: add changeset (#1853) * chore: remove unused components in /components (#1866) * chore: remove store selector page that is no longer being used (#1868) * chore: remove /cart-quantity route that is no longer being used (#1869) * chore: remove unused components in /blog (#1867) * chore: remove @bigcommerce/makeswift group from codeowners (#1872) * fix: don't pass `{}` to `createSearchParamsCache` * chore: upgrade next to 15.2.0-canary.1 This release contain fixes for 404 revalidation issue with revalidateTag bug. * feat(core): update order details page with VIBES * refactor(core): remove product path fetching in favor of line item path * fix: use lazy promise on getCartCount to defer cookies() execution This fixes 500 error: needs to bail out of prerendering at this point because it used cookies() Without the lazy promise, the getCartCount() is immediately executed, and calls cookies(). With lazy promise, the getCartCount() execution is deferred, until await/then is used. * feat(core): update address list to use VIBES * feat(core): add country list to account addresses * Add down for maintenance page * fix: accessibility issues in PDP (#1877) * Add Web Pages * chore: bring in latest changes from VIBES * fix: add hideOverflow to sections and carousels * fix: use SectionLayout in FeaturedProductCarousel * fix: use SectionLayout in FeaturedBlogList --------- Co-authored-by: Hunter Garrett <[email protected]> Co-authored-by: Alan Pledger <[email protected]> Co-authored-by: Miguel Oller <[email protected]> Co-authored-by: Chancellor Clark <[email protected]> Co-authored-by: Miguel Oller <[email protected]> Co-authored-by: Daniel Almaguer <[email protected]> Co-authored-by: jordanarldt <[email protected]> Co-authored-by: Aleksey Gurtovoy <[email protected]> Co-authored-by: Fikri Karim <[email protected]>
bigcommerce · Jan 10, 2025 · 6b17bdb · 6b17bdb
1 parent c0c5ae7
commit 6b17bdb
Show file tree

Hide file tree

Showing 366 changed files with 16,934 additions and 14,411 deletions.
diff --git a/.changeset/tidy-stingrays-search.md b/.changeset/tidy-stingrays-search.md
@@ -0,0 +1,13 @@
+---
+"@bigcommerce/catalyst-core": major
+---
+
+Introduce Soul VIBE UI library to the repository.
+
+- Added a collection of reusable primitives with modern styles
+- Prebuilt sections and page templates that are easy to use
+- Fast performance and modern patterns leveraging the latest features of Next.js
+- Easy customization to best represent your brand
+- Utilize @conform-to/react for progressively enhanced HTML forms
+
+Join the discussion [here](https://github.com/bigcommerce/catalyst/discussions/1861) for more details of this major milestone for Catalyst!
diff --git a/.github/workflows/regression-tests.yml b/.github/workflows/regression-tests.yml
diff --git a/core/app/[locale]/(default)/(auth)/change-password/_actions/change-password.ts b/core/app/[locale]/(default)/(auth)/change-password/_actions/change-password.ts
@@ -1,23 +1,13 @@
 'use server';
 
+import { SubmissionResult } from '@conform-to/react';
+import { parseWithZod } from '@conform-to/zod';
 import { getTranslations } from 'next-intl/server';
-import { z, ZodError } from 'zod';
 
+import { schema } from '@/vibes/soul/sections/reset-password-section/schema';
 import { client } from '~/client';
 import { graphql } from '~/client/graphql';
 
-const ChangePasswordFieldsSchema = z.object({
-  customerId: z.string(),
-  customerToken: z.string(),
-  currentPassword: z.string().min(1),
-  newPassword: z.string().min(1),
-  confirmPassword: z.string().min(1),
-});
-
-const ChangePasswordSchema = ChangePasswordFieldsSchema.omit({
-  currentPassword: true,
-}).required();
-
 const ChangePasswordMutation = graphql(`
   mutation ChangePassword($input: ResetPasswordInput!) {
     customer {
@@ -34,29 +24,26 @@ const ChangePasswordMutation = graphql(`
   }
 `);
 
-interface ChangePasswordResponse {
-  status: 'success' | 'error';
-  message: string;
-}
-
-export const changePassword = async (formData: FormData): Promise<ChangePasswordResponse> => {
+export async function changePassword(
+  { token, customerEntityId }: { token: string; customerEntityId: string },
+  _prevState: { lastResult: SubmissionResult | null; successMessage?: string },
+  formData: FormData,
+) {
   const t = await getTranslations('ChangePassword');
+  const submission = parseWithZod(formData, { schema });
 
-  try {
-    const parsedData = ChangePasswordSchema.parse({
-      customerId: formData.get('customer-id'),
-      customerToken: formData.get('customer-token'),
-      newPassword: formData.get('new-password'),
-      confirmPassword: formData.get('confirm-password'),
-    });
+  if (submission.status !== 'success') {
+    return { lastResult: submission.reply({ formErrors: [t('Form.error')] }) };
+  }
 
+  try {
     const response = await client.fetch({
       document: ChangePasswordMutation,
       variables: {
         input: {
-          token: parsedData.customerToken,
-          customerEntityId: Number(parsedData.customerId),
-          newPassword: parsedData.newPassword,
+          token,
+          customerEntityId: Number(customerEntityId),
+          newPassword: submission.value.password,
         },
       },
       fetchOptions: {
@@ -67,23 +54,24 @@ export const changePassword = async (formData: FormData): Promise<ChangePassword
     const result = response.data.customer.resetPassword;
 
     if (result.errors.length > 0) {
-      result.errors.forEach((error) => {
-        throw new Error(error.message);
-      });
+      return {
+        lastResult: submission.reply({ formErrors: result.errors.map((error) => error.message) }),
+      };
     }
 
     return {
-      status: 'success',
-      message: t('confirmChangePassword'),
+      lastResult: submission.reply(),
+      successMessage: t('Form.successMessage'),
     };
   } catch (error: unknown) {
-    if (error instanceof Error || error instanceof ZodError) {
+    if (error instanceof Error) {
       return {
-        status: 'error',
-        message: error.message,
+        lastResult: submission.reply({ formErrors: [error.message] }),
       };
     }
 
-    return { status: 'error', message: t('Errors.error') };
+    return {
+      lastResult: submission.reply({ formErrors: [t('Errors.error')] }),
+    };
   }
-};
+}