Add carousel section

templates/hydrogen-theme/app/components/Button.tsx

@@ -0,0 +1,56 @@
+import {Slot} from '@radix-ui/react-slot';
+import {type VariantProps, cva} from 'class-variance-authority';
+import * as React from 'react';
+
+import {cn} from '~/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        default: 'h-10 px-4 py-2',
+        icon: 'h-10 w-10',
+        lg: 'h-11 rounded-md px-8',
+        sm: 'h-9 rounded-md px-3',
+      },
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      },
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({asChild = false, className, size, variant, ...props}, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({className, size, variant}))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export {Button, buttonVariants};

templates/hydrogen-theme/app/components/Carousel.tsx

@@ -0,0 +1,319 @@
+// https://ui.shadcn.com/docs/components/carousel
+import type {
+  EmblaCarouselType as CarouselApi,
+  EmblaOptionsType as CarouselOptions,
+  EmblaPluginType as CarouselPlugin,
+} from 'embla-carousel';
+
+import {cx} from 'class-variance-authority';
+import useEmblaCarousel from 'embla-carousel-react';
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+import {cn} from '~/lib/utils';
+
+import {Button} from './Button';
+import {IconArrow} from './icons/IconArrow';
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  orientation?: 'horizontal' | 'vertical';
+  plugins?: CarouselPlugin[];
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  canScrollNext: boolean;
+  canScrollPrev: boolean;
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  scrollNext: () => void;
+  scrollPrev: () => void;
+  scrollSnaps: number[];
+  scrollTo: (index: number) => void;
+  selectedIndex: number;
+} & CarouselProps;
+
+const CarouselContext = createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />');
+  }
+
+  return context;
+}
+
+const Carousel = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      children,
+      className,
+      opts,
+      orientation = 'horizontal',
+      plugins,
+      setApi,
+      ...props
+    },
+    ref,
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+      },
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+
+    const onInit = useCallback(
+      (api: CarouselApi) => setScrollSnaps(api.scrollSnapList()),
+      [],
+    );
+
+    const onSelect = useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
+      }
+
+      setSelectedIndex(api.selectedScrollSnap());
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const scrollTo = useCallback(
+      (index: number) => api && api.scrollTo(index),
+      [api],
+    );
+
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext],
+    );
+
+    useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onInit(api);
+      onSelect(api);
+      api.on('reInit', onSelect);
+      api.on('select', onSelect);
+
+      return () => {
+        api?.off('select', onSelect);
+      };
+    }, [api, onSelect, onInit]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          api: api,
+          canScrollNext,
+          canScrollPrev,
+          carouselRef,
+          opts,
+          orientation:
+            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+          scrollNext,
+          scrollPrev,
+          scrollSnaps,
+          scrollTo,
+          selectedIndex,
+        }}
+      >
+        <div
+          aria-roledescription="carousel"
+          className={cn('relative', className)}
+          onKeyDownCapture={handleKeyDown}
+          ref={ref}
+          role="region"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = 'Carousel';
+
+const CarouselContent = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({className, ...props}, ref) => {
+  const {carouselRef, orientation} = useCarousel();
+
+  return (
+    <div className="overflow-hidden" ref={carouselRef}>
+      <div
+        className={cn(
+          'flex select-none',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    </div>
+  );
+});
+CarouselContent.displayName = 'CarouselContent';
+
+const CarouselItem = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({className, ...props}, ref) => {
+  const {orientation} = useCarousel();
+
+  return (
+    <div
+      aria-roledescription="slide"
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'md:pl-4' : 'md:pt-4',
+        className,
+      )}
+      ref={ref}
+      role="group"
+      {...props}
+    />
+  );
+});
+CarouselItem.displayName = 'CarouselItem';
+
+const CarouselPagination = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({className, ...props}, ref) => {
+  const {scrollSnaps, scrollTo, selectedIndex} = useCarousel();
+
+  return (
+    <div className="flex justify-center gap-2">
+      {scrollSnaps.map((_, index) => (
+        <Button
+          className={cn(className, 'p-1')}
+          key={index}
+          onClick={() => scrollTo(index)}
+          ref={ref}
+          {...props}
+        >
+          <span
+            className={cx([
+              'aspect-square size-[10px] rounded-full border border-current opacity-85 transition-colors',
+              index === selectedIndex && 'bg-current',
+            ])}
+          />
+        </Button>
+      ))}
+    </div>
+  );
+});
+CarouselPagination.displayName = 'CarouselDots';
+
+const CarouselPrevious = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({className, size = 'icon', variant = 'outline', ...props}, ref) => {
+  const {canScrollPrev, orientation, scrollPrev} = useCarousel();
+
+  return (
+    <Button
+      className={cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? '-left-12 top-1/2 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      ref={ref}
+      size={size}
+      variant={variant}
+      {...props}
+    >
+      <IconArrow className="size-3" direction="left" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+});
+CarouselPrevious.displayName = 'CarouselPrevious';
+
+const CarouselNext = forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({className, size = 'icon', variant = 'outline', ...props}, ref) => {
+  const {canScrollNext, orientation, scrollNext} = useCarousel();
+
+  return (
+    <Button
+      className={cn(
+        'absolute size-8 rounded-full',
+        orientation === 'horizontal'
+          ? '-right-12 top-1/2 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      ref={ref}
+      size={size}
+      variant={variant}
+      {...props}
+    >
+      <IconArrow className="size-3" direction="right" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+});
+CarouselNext.displayName = 'CarouselNext';
+
+export {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPagination,
+  CarouselPrevious,
+};