sunpeak 0.2.6 → 0.3.2

package/template/src/components/shadcn/select.tsx

@@ -1,157 +0,0 @@
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
-
-import { cn } from "@/lib/index"
-
-const Select = SelectPrimitive.Root
-
-const SelectGroup = SelectPrimitive.Group
-
-const SelectValue = SelectPrimitive.Value
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-}

package/template/src/components/sunpeak-card.test.tsx

@@ -1,76 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi } from 'vitest';
-import { SunpeakCard } from './sunpeak-card';
-
-describe('SunpeakCard', () => {
-  it('renders image, header, metadata, and content', () => {
-    render(
-      <SunpeakCard
-        image="https://example.com/image.jpg"
-        imageAlt="Test image"
-        header="Test Header"
-        metadata="Test metadata"
-      >
-        Card content here
-      </SunpeakCard>
-    );
-
-    expect(screen.getByRole('img')).toHaveAttribute('src', 'https://example.com/image.jpg');
-    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
-    expect(screen.getByText('Test Header')).toBeInTheDocument();
-    expect(screen.getByText('Test metadata')).toBeInTheDocument();
-    expect(screen.getByText('Card content here')).toBeInTheDocument();
-  });
-
-  it('applies variant styles correctly', () => {
-    const { rerender } = render(
-      <SunpeakCard
-        image="https://example.com/image.jpg"
-        imageAlt="Test"
-        variant="bordered"
-        data-testid="card"
-      />
-    );
-
-    expect(screen.getByTestId('card')).toHaveClass('border-2');
-
-    rerender(
-      <SunpeakCard
-        image="https://example.com/image.jpg"
-        imageAlt="Test"
-        variant="elevated"
-        data-testid="card"
-      />
-    );
-
-    expect(screen.getByTestId('card')).toHaveClass('shadow-lg');
-  });
-
-  it('renders buttons and handles clicks without propagating to card', async () => {
-    const user = userEvent.setup();
-    const cardClick = vi.fn();
-    const buttonClick = vi.fn();
-
-    render(
-      <SunpeakCard
-        image="https://example.com/image.jpg"
-        imageAlt="Test"
-        onClick={cardClick}
-        button1={{ children: 'Primary', onClick: buttonClick, isPrimary: true }}
-        button2={{ children: 'Secondary', onClick: buttonClick }}
-      />
-    );
-
-    const primaryButton = screen.getByRole('button', { name: 'Primary' });
-    const secondaryButton = screen.getByRole('button', { name: 'Secondary' });
-
-    expect(primaryButton).toBeInTheDocument();
-    expect(secondaryButton).toBeInTheDocument();
-
-    await user.click(primaryButton);
-
-    expect(buttonClick).toHaveBeenCalledTimes(1);
-    expect(cardClick).not.toHaveBeenCalled();
-  });
-});

package/template/src/components/sunpeak-card.tsx

@@ -1,171 +0,0 @@
-import * as React from "react"
-import { useWidgetState } from "sunpeak"
-import { cn } from "@/lib/index"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/shadcn/card"
-import { Button } from "@/components/shadcn/button"
-
-export interface SunpeakButtonProps extends Omit<React.ComponentProps<typeof Button>, 'onClick'> {
-  isPrimary?: boolean
-  onClick: () => void
-}
-
-export interface SunpeakCardData extends Record<string, unknown> {
-  image?: string
-  imageAlt?: string
-  imageMaxWidth?: number
-  imageMaxHeight?: number
-  header?: React.ReactNode
-  metadata?: React.ReactNode
-  children?: React.ReactNode
-  button1?: SunpeakButtonProps
-  button2?: SunpeakButtonProps
-  variant?: "default" | "bordered" | "elevated"
-}
-
-export interface SunpeakCardState extends Record<string, unknown> {
-  selectedVariant?: "default" | "bordered" | "elevated"
-}
-
-export interface SunpeakCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode
-  image?: string
-  imageAlt?: string
-  imageMaxWidth?: number
-  imageMaxHeight?: number
-  header?: React.ReactNode
-  metadata?: React.ReactNode
-  button1?: SunpeakButtonProps
-  button2?: SunpeakButtonProps
-  variant?: "default" | "bordered" | "elevated"
-}
-
-export const SunpeakCard = React.forwardRef<HTMLDivElement, SunpeakCardProps>(
-  (
-    {
-      children: childrenProp,
-      image: imageProp,
-      imageAlt: imageAltProp,
-      imageMaxWidth: imageMaxWidthProp = 400,
-      imageMaxHeight: imageMaxHeightProp = 400,
-      header: headerProp,
-      metadata: metadataProp,
-      button1: button1Prop,
-      button2: button2Prop,
-      variant: variantProp = "default",
-      className,
-      onClick,
-      ...props
-    },
-    ref
-  ) => {
-    const [widgetState] = useWidgetState<SunpeakCardState>(() => ({}))
-
-    const children = childrenProp
-    const image = imageProp
-    const imageAlt = imageAltProp
-    const imageMaxWidth = imageMaxWidthProp
-    const imageMaxHeight = imageMaxHeightProp
-    const header = headerProp
-    const metadata = metadataProp
-    const button1 = button1Prop
-    const button2 = button2Prop
-    const variant = widgetState?.selectedVariant ?? variantProp
-
-    const hasButtons = button1 || button2
-
-    const handleCardClick = (e: React.MouseEvent<HTMLDivElement>) => {
-      onClick?.(e)
-    }
-
-    const renderButton = (buttonProps: SunpeakButtonProps) => {
-      const { isPrimary = false, onClick: buttonOnClick, children, ...restProps } = buttonProps
-
-      const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-        e.stopPropagation()
-        buttonOnClick()
-      }
-
-      return (
-        <Button
-          {...restProps}
-          variant={isPrimary ? "default" : "outline"}
-          onClick={handleClick}
-        >
-          {children}
-        </Button>
-      )
-    }
-
-    const variantClasses = {
-      default: "",
-      bordered: "border-2",
-      elevated: "shadow-lg",
-    }
-
-    return (
-      <Card
-        ref={ref}
-        className={cn(
-          "overflow-hidden cursor-pointer select-none",
-          variantClasses[variant],
-          className
-        )}
-        onClick={handleCardClick}
-        {...props}
-      >
-        {image && (
-          <div className="w-full overflow-hidden">
-            <img
-              src={image}
-              alt={imageAlt}
-              loading="lazy"
-              className="w-full h-auto aspect-square object-cover"
-              style={{
-                maxWidth: `${imageMaxWidth}px`,
-                maxHeight: `${imageMaxHeight}px`,
-              }}
-            />
-          </div>
-        )}
-        <div className="flex flex-col flex-1">
-          {(header || metadata) && (
-            <CardHeader className={cn("p-3", image && "pt-2")}>
-              {header && (
-                <CardTitle className="text-sm font-medium leading-tight overflow-hidden text-ellipsis whitespace-nowrap">
-                  {header}
-                </CardTitle>
-              )}
-              {metadata && (
-                <CardDescription className="text-xs leading-normal">
-                  {metadata}
-                </CardDescription>
-              )}
-            </CardHeader>
-          )}
-          {children && (
-            <CardContent className={cn(
-              "px-3 pb-3 text-sm leading-normal",
-              (header || metadata) ? "pt-0" : "pt-3"
-            )}>
-              <div className="line-clamp-2">{children}</div>
-            </CardContent>
-          )}
-          {hasButtons && (
-            <CardFooter className="flex gap-2 flex-wrap px-3 pb-3 pt-0">
-              {button1 && renderButton(button1)}
-              {button2 && renderButton(button2)}
-            </CardFooter>
-          )}
-        </div>
-      </Card>
-    )
-  }
-)
-SunpeakCard.displayName = "SunpeakCard"

package/template/src/components/sunpeak-carousel.test.tsx

@@ -1,42 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { SunpeakCarousel } from './sunpeak-carousel';
-
-describe('SunpeakCarousel', () => {
-  it('renders all children as carousel items', () => {
-    render(
-      <SunpeakCarousel>
-        <div>Item 1</div>
-        <div>Item 2</div>
-        <div>Item 3</div>
-      </SunpeakCarousel>
-    );
-
-    expect(screen.getByText('Item 1')).toBeInTheDocument();
-    expect(screen.getByText('Item 2')).toBeInTheDocument();
-    expect(screen.getByText('Item 3')).toBeInTheDocument();
-  });
-
-  it('applies custom gap spacing to carousel content', () => {
-    render(
-      <SunpeakCarousel gap={24} data-testid="carousel">
-        <div>Item 1</div>
-        <div>Item 2</div>
-      </SunpeakCarousel>
-    );
-
-    const carouselContent = document.querySelector('[class*="ml-0"]');
-    expect(carouselContent).toHaveStyle({ gap: '24px' });
-  });
-
-  it('applies custom card width to carousel items', () => {
-    render(
-      <SunpeakCarousel cardWidth={300}>
-        <div>Item 1</div>
-      </SunpeakCarousel>
-    );
-
-    const carouselItem = document.querySelector('[class*="pl-0"]');
-    expect(carouselItem).toHaveStyle({ flexBasis: '300px', minWidth: '300px' });
-  });
-});

package/template/src/components/sunpeak-carousel.tsx

@@ -1,160 +0,0 @@
-import * as React from "react"
-import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures"
-import { useWidgetState, useDisplayMode } from "sunpeak"
-import { cn } from "@/lib/index"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-  type CarouselApi,
-} from "@/components/shadcn/carousel"
-
-export interface SunpeakCarouselData extends Record<string, unknown> {
-  children?: React.ReactNode
-  gap?: number
-  showArrows?: boolean
-  showEdgeGradients?: boolean
-  cardWidth?: number | { inline?: number; fullscreen?: number }
-}
-
-export interface SunpeakCarouselState extends Record<string, unknown> {
-  currentIndex?: number
-}
-
-export type SunpeakCarouselProps = {
-  children?: React.ReactNode
-  gap?: number
-  showArrows?: boolean
-  showEdgeGradients?: boolean
-  cardWidth?: number | { inline?: number; fullscreen?: number }
-  className?: string
-}
-
-export const SunpeakCarousel = React.forwardRef<
-  HTMLDivElement,
-  SunpeakCarouselProps
->(
-  (
-    {
-      children: childrenProp,
-      gap: gapProp = 16,
-      showArrows: showArrowsProp = true,
-      showEdgeGradients: showEdgeGradientsProp = true,
-      cardWidth: cardWidthProp,
-      className,
-    },
-    ref
-  ) => {
-    const [widgetState, setWidgetState] = useWidgetState<SunpeakCarouselState>(() => ({
-      currentIndex: 0,
-    }))
-    const displayMode = useDisplayMode()
-
-    const children = childrenProp
-    const gap = gapProp
-    const showArrows = showArrowsProp
-    const showEdgeGradients = showEdgeGradientsProp
-    const cardWidth = cardWidthProp
-
-    const [api, setApi] = React.useState<CarouselApi>()
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-    React.useEffect(() => {
-      if (!api) return
-
-      const onSelect = () => {
-        setCanScrollPrev(api.canScrollPrev())
-        setCanScrollNext(api.canScrollNext())
-
-        const currentIndex = api.selectedScrollSnap()
-        if (widgetState?.currentIndex !== currentIndex) {
-          setWidgetState({ currentIndex })
-        }
-      }
-
-      onSelect()
-      api.on("select", onSelect)
-      api.on("reInit", onSelect)
-
-      return () => {
-        api.off("select", onSelect)
-        api.off("reInit", onSelect)
-      }
-    }, [api, widgetState?.currentIndex, setWidgetState])
-
-    const childArray = React.Children.toArray(children)
-
-    const getCardWidth = () => {
-      if (typeof cardWidth === "number") {
-        return `${cardWidth}px`
-      }
-      if (cardWidth && typeof cardWidth === "object") {
-        if (displayMode === "fullscreen" && cardWidth.fullscreen) {
-          return `${cardWidth.fullscreen}px`
-        }
-        if (cardWidth.inline) {
-          return `${cardWidth.inline}px`
-        }
-      }
-      return "220px"
-    }
-
-    return (
-      <div ref={ref} className={cn("relative w-full", className)}>
-        {showEdgeGradients && canScrollPrev && (
-          <div
-            className="pointer-events-none absolute left-0 top-0 z-10 h-full w-12 bg-gradient-to-r from-background to-transparent transition-opacity"
-            aria-hidden="true"
-          />
-        )}
-        {showEdgeGradients && canScrollNext && (
-          <div
-            className="pointer-events-none absolute right-0 top-0 z-10 h-full w-12 bg-gradient-to-l from-background to-transparent transition-opacity"
-            aria-hidden="true"
-          />
-        )}
-
-        <Carousel
-          opts={{
-            align: "start",
-            dragFree: true,
-          }}
-          plugins={[WheelGesturesPlugin()]}
-          setApi={setApi}
-          className="w-full"
-        >
-          <CarouselContent
-            className="ml-0"
-            style={{
-              gap: `${gap}px`,
-            }}
-          >
-            {childArray.map((child, index) => (
-              <CarouselItem
-                key={index}
-                className="pl-0"
-                style={{
-                  flexBasis: getCardWidth(),
-                  minWidth: getCardWidth(),
-                }}
-              >
-                {child}
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-
-          {showArrows && canScrollPrev && (
-            <CarouselPrevious className="left-2" />
-          )}
-          {showArrows && canScrollNext && (
-            <CarouselNext className="right-2" />
-          )}
-        </Carousel>
-      </div>
-    )
-  }
-)
-SunpeakCarousel.displayName = "SunpeakCarousel"