Product Detail

import { ReactNode } from 'react';import { Stream, Streamable } from '@/vibes/soul/lib/streamable';import { Accordion, AccordionItem } from '@/vibes/soul/primitives/accordion';import { Price, PriceLabel } from '@/vibes/soul/primitives/price-label';import { Rating } from '@/vibes/soul/primitives/rating';import * as Skeleton from '@/vibes/soul/primitives/skeleton';import { type Breadcrumb, Breadcrumbs } from '@/vibes/soul/sections/breadcrumbs';import { ProductGallery } from '@/vibes/soul/sections/product-detail/product-gallery';import { ProductDetailForm, ProductDetailFormAction } from './product-detail-form';import { Field } from './schema';interface ProductDetailProduct {  id: string;  title: string;  href: string;  images: Streamable<Array<{ src: string; alt: string }>>;  price?: Streamable<Price | null>;  subtitle?: string;  badge?: string;  rating?: Streamable<number | null>;  summary?: Streamable<string>;  description?: Streamable<string | ReactNode | null>;  accordions?: Streamable<    Array<{      title: string;      content: ReactNode;    }>  >;}export interface ProductDetailProps<F extends Field> {  breadcrumbs?: Streamable<Breadcrumb[]>;  product: Streamable<ProductDetailProduct | null>;  action: ProductDetailFormAction<F>;  fields: Streamable<F[]>;  quantityLabel?: string;  incrementLabel?: string;  decrementLabel?: string;  ctaLabel?: Streamable<string | null>;  ctaDisabled?: Streamable<boolean | null>;  prefetch?: boolean;  thumbnailLabel?: string;  additionalInformationTitle?: string;}/** * This component supports various CSS variables for theming. Here's a comprehensive list, along * with their default values: * * ```css * :root { *   --product-detail-border: hsl(var(--contrast-100)); *   --product-detail-subtitle-font-family: var(--font-family-mono); *   --product-detail-title-font-family: var(--font-family-heading); *   --product-detail-primary-text: hsl(var(--foreground)); *   --product-detail-secondary-text:  hsl(var(--contrast-500)); * } * ``` */export function ProductDetail<F extends Field>({  product: streamableProduct,  action,  fields: streamableFields,  breadcrumbs,  quantityLabel,  incrementLabel,  decrementLabel,  ctaLabel: streamableCtaLabel,  ctaDisabled: streamableCtaDisabled,  prefetch,  thumbnailLabel,  additionalInformationTitle = 'Additional information',}: ProductDetailProps<F>) {  return (    <section className="@container">      <div className="group/product-detail mx-auto w-full max-w-screen-2xl px-4 py-10 @xl:px-6 @xl:py-14 @4xl:px-8 @4xl:py-20">        {breadcrumbs && (          <div className="group/breadcrumbs mb-6">            <Breadcrumbs breadcrumbs={breadcrumbs} />          </div>        )}        <Stream fallback={<ProductDetailSkeleton />} value={streamableProduct}>          {(product) =>            product && (              <div className="grid grid-cols-1 items-stretch gap-x-8 gap-y-8 @2xl:grid-cols-2 @5xl:gap-x-12">                <div className="group/product-gallery hidden @2xl:block">                  <Stream fallback={<ProductGallerySkeleton />} value={product.images}>                    {(images) => <ProductGallery images={images} />}                  </Stream>                </div>                {/* Product Details */}                <div className="text-[var(--product-detail-primary-text,hsl(var(--foreground)))]">                  {Boolean(product.subtitle) && (                    <p className="font-[family-name:var(--product-detail-subtitle-font-family,var(--font-family-mono))] text-sm uppercase">                      {product.subtitle}                    </p>                  )}                  <h1 className="mb-3 mt-2 font-[family-name:var(--product-detail-title-font-family,var(--font-family-heading))] text-2xl font-medium leading-none @xl:mb-4 @xl:text-3xl @4xl:text-4xl">                    {product.title}                  </h1>                  <div className="group/product-rating">                    <Stream fallback={<RatingSkeleton />} value={product.rating}>                      {(rating) => <Rating rating={rating ?? 0} />}                    </Stream>                  </div>                  <div className="group/product-price">                    <Stream fallback={<PriceLabelSkeleton />} value={product.price}>                      {(price) => (                        <PriceLabel className="my-3 text-xl @xl:text-2xl" price={price ?? ''} />                      )}                    </Stream>                  </div>                  <div className="group/product-gallery mb-8 @2xl:hidden">                    <Stream fallback={<ProductGallerySkeleton />} value={product.images}>                      {(images) => (                        <ProductGallery images={images} thumbnailLabel={thumbnailLabel} />                      )}                    </Stream>                  </div>                  <div className="group/product-summary">                    <Stream fallback={<ProductSummarySkeleton />} value={product.summary}>                      {(summary) =>                        Boolean(summary) && (                          <p className="text-[var(--product-detail-secondary-text,hsl(var(--contrast-500)))]">                            {summary}                          </p>                        )                      }                    </Stream>                  </div>                  <div className="group/product-detail-form">                    <Stream                      fallback={<ProductDetailFormSkeleton />}                      value={Streamable.all([                        streamableFields,                        streamableCtaLabel,                        streamableCtaDisabled,                      ])}                    >                      {([fields, ctaLabel, ctaDisabled]) => (                        <ProductDetailForm                          action={action}                          ctaDisabled={ctaDisabled ?? undefined}                          ctaLabel={ctaLabel ?? undefined}                          decrementLabel={decrementLabel}                          fields={fields}                          incrementLabel={incrementLabel}                          prefetch={prefetch}                          productId={product.id}                          quantityLabel={quantityLabel}                        />                      )}                    </Stream>                  </div>                  <div className="group/product-description">                    <Stream fallback={<ProductDescriptionSkeleton />} value={product.description}>                      {(description) =>                        Boolean(description) && (                          <div className="prose prose-sm max-w-none border-t border-[var(--product-detail-border,hsl(var(--contrast-100)))] py-8">                            {description}                          </div>                        )                      }                    </Stream>                  </div>                  <h2 className="sr-only">{additionalInformationTitle}</h2>                  <div className="group/product-accordion">                    <Stream fallback={<ProductAccordionsSkeleton />} value={product.accordions}>                      {(accordions) =>                        accordions && (                          <Accordion                            className="border-t border-[var(--product-detail-border,hsl(var(--contrast-100)))] pt-4"                            type="multiple"                          >                            {accordions.map((accordion, index) => (                              <AccordionItem                                key={index}                                title={accordion.title}                                value={index.toString()}                              >                                {accordion.content}                              </AccordionItem>                            ))}                          </Accordion>                        )                      }                    </Stream>                  </div>                </div>              </div>            )          }        </Stream>      </div>    </section>  );}function ProductGallerySkeleton() {  return (    <Skeleton.Root className="group-has-[[data-pending]]/product-gallery:animate-pulse" pending>      <div className="w-full overflow-hidden rounded-xl @xl:rounded-2xl">        <div className="flex">          <Skeleton.Box className="aspect-[4/5] h-full w-full shrink-0 grow-0 basis-full" />        </div>      </div>      <div className="mt-2 flex max-w-full gap-2 overflow-x-auto">        {Array.from({ length: 5 }).map((_, idx) => (          <Skeleton.Box className="h-12 w-12 shrink-0 rounded-lg @md:h-16 @md:w-16" key={idx} />        ))}      </div>    </Skeleton.Root>  );}function PriceLabelSkeleton() {  return <Skeleton.Box className="my-4 h-4 w-20 rounded-md" />;}function RatingSkeleton() {  return (    <Skeleton.Root      className="flex w-[136px] items-center gap-1 group-has-[[data-pending]]/product-rating:animate-pulse"      pending    >      <Skeleton.Box className="h-4 w-[100px] rounded-md" />      <Skeleton.Box className="h-6 w-8 rounded-xl" />    </Skeleton.Root>  );}function ProductSummarySkeleton() {  return (    <Skeleton.Root      className="flex w-full flex-col gap-3.5 pb-6 group-has-[[data-pending]]/product-summary:animate-pulse"      pending    >      {Array.from({ length: 3 }).map((_, idx) => (        <Skeleton.Box className="h-2.5 w-full" key={idx} />      ))}    </Skeleton.Root>  );}function ProductDescriptionSkeleton() {  return (    <Skeleton.Root      className="flex w-full flex-col gap-3.5 pb-6 group-has-[[data-pending]]/product-description:animate-pulse"      pending    >      {Array.from({ length: 2 }).map((_, idx) => (        <Skeleton.Box className="h-2.5 w-full" key={idx} />      ))}      <Skeleton.Box className="h-2.5 w-3/4" />    </Skeleton.Root>  );}function ProductDetailFormSkeleton() {  return (    <Skeleton.Root      className="flex flex-col gap-8 py-8 group-has-[[data-pending]]/product-detail-form:animate-pulse"      pending    >      <div className="flex flex-col gap-5">        <Skeleton.Box className="h-2 w-10 rounded-md" />        <div className="flex gap-2">          {Array.from({ length: 3 }).map((_, idx) => (            <Skeleton.Box className="h-11 w-[72px] rounded-full" key={idx} />          ))}        </div>      </div>      <div className="flex flex-col gap-5">        <Skeleton.Box className="h-3 w-16 rounded-md" />        <div className="flex gap-4">          {Array.from({ length: 5 }).map((_, idx) => (            <Skeleton.Box className="h-10 w-10 rounded-full" key={idx} />          ))}        </div>      </div>      <div className="flex gap-2">        <Skeleton.Box className="h-12 w-[120px] rounded-lg" />        <Skeleton.Box className="h-12 w-[216px] rounded-full" />      </div>    </Skeleton.Root>  );}function ProductAccordionsSkeleton() {  return (    <Skeleton.Root      className="flex h-[600px] w-full flex-col gap-8 pt-4 group-has-[[data-pending]]/product-accordion:animate-pulse"      pending    >      <div className="flex items-center justify-between">        <Skeleton.Box className="h-2 w-20 rounded-sm" />        <Skeleton.Box className="h-3 w-3 rounded-sm" />      </div>      <div className="mb-1 flex flex-col gap-4">        <Skeleton.Box className="h-3 w-full rounded-sm" />        <Skeleton.Box className="h-3 w-full rounded-sm" />        <Skeleton.Box className="h-3 w-3/5 rounded-sm" />      </div>      <div className="flex items-center justify-between">        <Skeleton.Box className="h-2 w-24 rounded-sm" />        <Skeleton.Box className="h-3 w-3 rounded-full" />      </div>      <div className="flex items-center justify-between">        <Skeleton.Box className="h-2 w-20 rounded-sm" />        <Skeleton.Box className="h-3 w-3 rounded-full" />      </div>      <div className="flex items-center justify-between">        <Skeleton.Box className="h-2 w-32 rounded-sm" />        <Skeleton.Box className="h-3 w-3 rounded-full" />      </div>    </Skeleton.Root>  );}export function ProductDetailSkeleton() {  return (    <Skeleton.Root      className="grid grid-cols-1 items-stretch gap-x-6 gap-y-8 group-has-[[data-pending]]/product-detail:animate-pulse @2xl:grid-cols-2 @5xl:gap-x-12"      pending    >      <div className="hidden @2xl:block">        <ProductGallerySkeleton />      </div>      <div>        <Skeleton.Box className="mb-6 h-4 w-20 rounded-lg" />        <Skeleton.Box className="mb-6 h-6 w-72 rounded-lg" />        <RatingSkeleton />        <PriceLabelSkeleton />        <ProductSummarySkeleton />        <div className="mb-8 @2xl:hidden">          <ProductGallerySkeleton />        </div>        <ProductDetailFormSkeleton />      </div>    </Skeleton.Root>  );}

'use client';import {  FieldMetadata,  FormProvider,  FormStateInput,  getFormProps,  SubmissionResult,  useForm,  useInputControl,} from '@conform-to/react';import { getZodConstraint, parseWithZod } from '@conform-to/zod';import { usePathname, useRouter } from 'next/navigation';import { createSerializer, parseAsString, useQueryStates } from 'nuqs';import { ReactNode, useActionState, useCallback, useEffect } from 'react';import { useFormStatus } from 'react-dom';import { z } from 'zod';import { ButtonRadioGroup } from '@/vibes/soul/form/button-radio-group';import { CardRadioGroup } from '@/vibes/soul/form/card-radio-group';import { Checkbox } from '@/vibes/soul/form/checkbox';import { FormStatus } from '@/vibes/soul/form/form-status';import { Input } from '@/vibes/soul/form/input';import { NumberInput } from '@/vibes/soul/form/number-input';import { RadioGroup } from '@/vibes/soul/form/radio-group';import { Select } from '@/vibes/soul/form/select';import { SwatchRadioGroup } from '@/vibes/soul/form/swatch-radio-group';import { Button } from '@/vibes/soul/primitives/button';import { toast } from '@/vibes/soul/primitives/toaster';import { Field, schema, SchemaRawShape } from './schema';type Action<S, P> = (state: Awaited<S>, payload: P) => S | Promise<S>;interface State<F extends Field> {  fields: F[];  lastResult: SubmissionResult | null;  successMessage?: ReactNode;}export type ProductDetailFormAction<F extends Field> = Action<State<F>, FormData>;export interface ProductDetailFormProps<F extends Field> {  fields: F[];  action: ProductDetailFormAction<F>;  productId: string;  ctaLabel?: string;  quantityLabel?: string;  incrementLabel?: string;  decrementLabel?: string;  ctaDisabled?: boolean;  prefetch?: boolean;}export function ProductDetailForm<F extends Field>({  action,  fields,  productId,  ctaLabel = 'Add to cart',  quantityLabel = 'Quantity',  incrementLabel = 'Increase quantity',  decrementLabel = 'Decrease quantity',  ctaDisabled = false,  prefetch = false,}: ProductDetailFormProps<F>) {  const router = useRouter();  const pathname = usePathname();  const searchParams = fields.reduce<Record<string, typeof parseAsString>>((acc, field) => {    return field.persist === true ? { ...acc, [field.name]: parseAsString } : acc;  }, {});  const [params] = useQueryStates(searchParams, { shallow: false });  const onPrefetch = (fieldName: string, value: string) => {    if (prefetch) {      const serialize = createSerializer(searchParams);      const newUrl = serialize(pathname, { ...params, [fieldName]: value });      router.prefetch(newUrl);    }  };  const defaultValue = fields.reduce<{    [Key in keyof SchemaRawShape]?: z.infer<SchemaRawShape[Key]>;  }>(    (acc, field) => ({      ...acc,      [field.name]: params[field.name] ?? field.defaultValue ?? '',    }),    { quantity: 1 },  );  const [{ lastResult, successMessage }, formAction] = useActionState(action, {    fields,    lastResult: null,  });  useEffect(() => {    if (lastResult?.status === 'success') {      toast.success(successMessage);    }  }, [lastResult, successMessage]);  const [form, formFields] = useForm({    lastResult,    constraint: getZodConstraint(schema(fields)),    onValidate({ formData }) {      return parseWithZod(formData, { schema: schema(fields) });    },    // @ts-expect-error: `defaultValue` types are conflicting with `onValidate`.    defaultValue,    shouldValidate: 'onSubmit',    shouldRevalidate: 'onInput',  });  const quantityControl = useInputControl(formFields.quantity);  return (    <FormProvider context={form.context}>      <FormStateInput />      <form {...getFormProps(form)} action={formAction} className="py-8">        <input name="id" type="hidden" value={productId} />        <div className="space-y-6">          {fields.map((field) => {            return (              <FormField                field={field}                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion                formField={formFields[field.name]!}                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion                key={formFields[field.name]!.id}                onPrefetch={onPrefetch}              />            );          })}          {form.errors?.map((error, index) => (            <FormStatus className="pt-3" key={index} type="error">              {error}            </FormStatus>          ))}          <div className="flex gap-x-3 pt-3">            <NumberInput              aria-label={quantityLabel}              decrementLabel={decrementLabel}              incrementLabel={incrementLabel}              min={1}              name={formFields.quantity.name}              onBlur={quantityControl.blur}              onChange={(e) => quantityControl.change(e.currentTarget.value)}              onFocus={quantityControl.focus}              required              value={quantityControl.value}            />            <SubmitButton disabled={ctaDisabled}>{ctaLabel}</SubmitButton>          </div>        </div>      </form>    </FormProvider>  );}function SubmitButton({ children, disabled }: { children: ReactNode; disabled?: boolean }) {  const { pending } = useFormStatus();  return (    <Button      className="w-auto @xl:w-56"      disabled={disabled}      loading={pending}      size="medium"      type="submit"    >      {children}    </Button>  );}function FormField({  field,  formField,  onPrefetch,}: {  field: Field;  formField: FieldMetadata<string | number | boolean | Date | undefined>;  onPrefetch: (fieldName: string, value: string) => void;}) {  const controls = useInputControl(formField);  const [, setParams] = useQueryStates(    field.persist === true ? { [field.name]: parseAsString.withOptions({ shallow: false }) } : {},  );  const handleChange = useCallback(    (value: string) => {      void setParams({ [field.name]: value });      controls.change(value);    },    [setParams, field, controls],  );  const handleOnOptionMouseEnter = (value: string) => {    if (field.persist === true) {      onPrefetch(field.name, value);    }  };  switch (field.type) {    case 'number':      return (        <NumberInput          decrementLabel={field.decrementLabel}          errors={formField.errors}          incrementLabel={field.incrementLabel}          key={formField.id}          label={field.label}          name={formField.name}          onBlur={controls.blur}          onChange={(e) => handleChange(e.currentTarget.value)}          onFocus={controls.focus}          required={formField.required}          value={controls.value ?? ''}        />      );    case 'text':      return (        <Input          errors={formField.errors}          key={formField.id}          label={field.label}          name={formField.name}          onBlur={controls.blur}          onChange={(e) => handleChange(e.currentTarget.value)}          onFocus={controls.focus}          required={formField.required}          value={controls.value ?? ''}        />      );    case 'checkbox':      return (        <Checkbox          errors={formField.errors}          key={formField.id}          label={field.label}          name={formField.name}          onBlur={controls.blur}          onCheckedChange={(value) => handleChange(String(value))}          onFocus={controls.focus}          required={formField.required}          value={controls.value ?? 'false'}        />      );    case 'select':      return (        <Select          errors={formField.errors}          key={formField.id}          label={field.label}          name={formField.name}          onBlur={controls.blur}          onFocus={controls.focus}          onOptionMouseEnter={handleOnOptionMouseEnter}          onValueChange={handleChange}          options={field.options}          required={formField.required}          value={controls.value ?? ''}        />      );    case 'radio-group':      return (        <RadioGroup          errors={formField.errors}          key={formField.id}          label={field.label}          name={formField.name}          onBlur={controls.blur}          onFocus={controls.focus}          onOptionMouseEnter={handleOnOptionMouseEnter}          onValueChange={handleChange}          options={field.options}          required={formField.required}          value={controls.value ?? ''}        />      );    case 'swatch-radio-group':      return (        <SwatchRadioGroup          errors={formField.errors}          key={formField.id}          label={field.label}          name={formField.name}          onBlur={controls.blur}          onFocus={controls.focus}          onOptionMouseEnter={handleOnOptionMouseEnter}          onValueChange={handleChange}          options={field.options}          required={formField.required}          value={controls.value ?? ''}        />      );    case 'card-radio-group':      return (        <CardRadioGroup          errors={formField.errors}          key={formField.id}          label={field.label}          name={formField.name}          onBlur={controls.blur}          onFocus={controls.focus}          onOptionMouseEnter={handleOnOptionMouseEnter}          onValueChange={handleChange}          options={field.options}          required={formField.required}          value={controls.value ?? ''}        />      );    case 'button-radio-group':      return (        <ButtonRadioGroup          errors={formField.errors}          key={formField.id}          label={field.label}          name={formField.name}          onBlur={controls.blur}          onFocus={controls.focus}          onOptionMouseEnter={handleOnOptionMouseEnter}          onValueChange={handleChange}          options={field.options}          required={formField.required}          value={controls.value ?? ''}        />      );  }}

import { z } from 'zod';interface FormField {  name: string;  label?: string;  errors?: string[];  required?: boolean;  persist?: boolean;}type RadioField = {  type: 'radio-group';  options: Array<{ label: string; value: string }>;  defaultValue?: string;} & FormField;type SelectField = {  type: 'select';  options: Array<{ label: string; value: string }>;  defaultValue?: string;} & FormField;type CheckboxField = {  type: 'checkbox';  defaultValue?: string;} & FormField;type NumberInputField = {  type: 'number';  defaultValue?: string;  min?: number;  max?: number;  incrementLabel?: string;  decrementLabel?: string;} & FormField;type TextInputField = {  type: 'text';  defaultValue?: string;  pattern?: string;} & FormField;type TextAreaField = {  type: 'textarea';  defaultValue?: string;  pattern?: string;} & FormField;type DateField = {  type: 'date';  defaultValue?: string;  pattern?: string;} & FormField;type SwatchRadioFieldOption =  | {      type: 'color';      value: string;      label: string;      color: string;      disabled?: boolean;    }  | {      type: 'image';      value: string;      label: string;      image: { src: string; alt: string };      disabled?: boolean;    };type SwatchRadioField = {  type: 'swatch-radio-group';  defaultValue?: string;  options: SwatchRadioFieldOption[];} & FormField;type CardRadioField = {  type: 'card-radio-group';  defaultValue?: string;  options: Array<{    value: string;    label: string;    image: { src: string; alt: string };    disabled?: boolean;  }>;} & FormField;type ButtonRadioField = {  type: 'button-radio-group';  defaultValue?: string;  pattern?: string;  options: Array<{    value: string;    label: string;    disabled?: boolean;  }>;} & FormField;export type Field =  | RadioField  | CheckboxField  | NumberInputField  | TextInputField  | TextAreaField  | DateField  | SwatchRadioField  | CardRadioField  | ButtonRadioField  | SelectField;export interface SchemaRawShape {  [key: string]:    | z.ZodString    | z.ZodOptional<z.ZodString>    | z.ZodNumber    | z.ZodOptional<z.ZodNumber>;  id: z.ZodString;  quantity: z.ZodNumber;}export function schema(fields: Field[]): z.ZodObject<SchemaRawShape> {  const shape: SchemaRawShape = {    id: z.string(),    quantity: z.number().min(1),  };  fields.forEach((field) => {    let fieldSchema: z.ZodString | z.ZodNumber;    switch (field.type) {      case 'number':        fieldSchema = z.number();        if (field.min != null) fieldSchema = fieldSchema.min(field.min);        if (field.max != null) fieldSchema = fieldSchema.max(field.max);        shape[field.name] = fieldSchema;        break;      default:        fieldSchema = z.string();        shape[field.name] = fieldSchema;        break;    }    if (field.required !== true) shape[field.name] = fieldSchema.optional();  });  return z.object(shape);}