Skip to content

Commit

Permalink
Iterating
Browse files Browse the repository at this point in the history
  • Loading branch information
Duncid committed Dec 16, 2024
1 parent b240127 commit 17191ee
Show file tree
Hide file tree
Showing 6 changed files with 147 additions and 122 deletions.
93 changes: 15 additions & 78 deletions sparkle/src/components/AssistantCard.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import React from "react";

import { Avatar, Button, ButtonProps, Card } from "@sparkle/components/";
import {
Avatar,
ButtonProps,
Card,
CardActionButton,
} from "@sparkle/components/";
import { MoreIcon } from "@sparkle/icons/";
import { cn } from "@sparkle/lib/utils";

Expand All @@ -13,76 +18,13 @@ interface BaseAssistantCardProps {
onClick?: () => void;
}

interface MetaAssistantCardProps {
className?: string;
variant: "sm" | "lg";
onClick?: () => void;
children: React.ReactNode;
action?: React.ReactNode;
}

const MetaAssistantCard = React.forwardRef<
HTMLDivElement,
MetaAssistantCardProps
>(({ className, variant, action, onClick, children }, ref) => {
return (
<div
className={cn("s-group/assistant-card s-relative", className)}
ref={ref}
>
<Card
variant={variant === "sm" ? "primary" : "tertiary"}
className={cn("s-flex s-h-full s-w-full s-flex-col s-gap-3")}
size={variant === "sm" ? "sm" : "md"}
onClick={onClick}
>
{children}
</Card>
{action && <AssistantCardAction>{action}</AssistantCardAction>}
</div>
);
});
MetaAssistantCard.displayName = "MetaAssistantCard";

const AssistantCardAction = React.forwardRef<
HTMLDivElement,
React.ComponentPropsWithoutRef<"div"> & {
children: React.ReactNode;
}
>(({ children, ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
"s-absolute s-right-3 s-top-3 s-opacity-0 s-transition-opacity",
"s-opacity-0 group-focus-within/assistant-card:s-opacity-100 group-hover/assistant-card:s-opacity-100"
)}
{...props}
>
{children}
</div>
);
});

AssistantCardAction.displayName = "AssistantCardAction";

type AssistantCardMore = ButtonProps;

export const AssistantCardMore = React.forwardRef<
HTMLButtonElement,
AssistantCardMore & {
className?: string;
}
>(({ className }, ref) => {
return (
<Button
ref={ref}
size="mini"
variant="outline"
icon={MoreIcon}
className={className}
/>
);
AssistantCardMore
>(({ ...props }, ref) => {
return <CardActionButton ref={ref} icon={MoreIcon} {...props} />;
});
AssistantCardMore.displayName = "AssistantCardMore";

Expand All @@ -99,10 +41,10 @@ export const AssistantCard = React.forwardRef<
ref
) => {
return (
<MetaAssistantCard
<Card
ref={ref}
variant="sm"
className={cn("s-flex s-gap-3", className)}
size="md"
className={cn("s-flex s-flex-col s-gap-3", className)}
onClick={onClick}
action={action}
>
Expand All @@ -124,7 +66,7 @@ export const AssistantCard = React.forwardRef<
{description}
</p>
)}
</MetaAssistantCard>
</Card>
);
}
);
Expand All @@ -137,20 +79,15 @@ export const LargeAssistantCard = React.forwardRef<
LargeAssistantCardProps
>(({ className, onClick, title, description, pictureUrl }, ref) => {
return (
<MetaAssistantCard
ref={ref}
variant="lg"
className={className}
onClick={onClick}
>
<Card ref={ref} size="lg" className={className} onClick={onClick}>
<div className="s-flex s-gap-3">
<Avatar visual={pictureUrl} size="lg" />
<div className="s-flex s-flex-col s-gap-2 s-text-base s-text-foreground">
<h3 className="s-font-medium">{title}</h3>
<p className="s-text-muted-foreground">{description}</p>
</div>
</div>
</MetaAssistantCard>
</Card>
);
});
LargeAssistantCard.displayName = "LargeAssistantCard";
2 changes: 1 addition & 1 deletion sparkle/src/components/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ type CommonButtonProps = Omit<MetaButtonProps, "children"> &
tooltip?: string;
};

type MiniButtonProps = CommonButtonProps & {
export type MiniButtonProps = CommonButtonProps & {
size: "mini";
icon: React.ComponentType;
label?: never;
Expand Down
104 changes: 96 additions & 8 deletions sparkle/src/components/Card.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { cva } from "class-variance-authority";
import React from "react";

import { LinkWrapperProps } from "@sparkle/components/";
import { Button, ButtonProps, LinkWrapperProps } from "@sparkle/components/";
import {
noHrefLink,
SparkleContext,
SparkleContextLinkType,
} from "@sparkle/context";
import { XMarkIcon } from "@sparkle/icons";
import { cn } from "@sparkle/lib/utils";

export const CARD_VARIANTS = ["primary", "secondary", "tertiary"] as const;
Expand All @@ -24,9 +25,9 @@ export const CARD_VARIANTS_SIZES = ["sm", "md", "lg"] as const;
export type CardSizeType = (typeof CARD_VARIANTS_SIZES)[number];

const sizeVariants: Record<CardSizeType, string> = {
sm: "s-p-3 s-rounded-2xl",
md: "s-p-4 s-rounded-3xl",
lg: "s-p-5 s-rounded-4xl",
sm: "s-p-3 s-rounded-xl",
md: "s-p-4 s-rounded-2xl",
lg: "s-p-5 s-rounded-3xl",
};

const cardVariants = cva(
Expand All @@ -49,11 +50,11 @@ interface CommonProps {
className?: string;
}

interface LinkProps extends CommonProps, LinkWrapperProps {
interface CardLinkProps extends CommonProps, LinkWrapperProps {
onClick?: never;
}

interface ButtonProps
interface CardButtonProps
extends CommonProps,
React.ButtonHTMLAttributes<HTMLDivElement> {
href?: never;
Expand All @@ -63,9 +64,9 @@ interface ButtonProps
shallow?: never;
}

export type CardProps = LinkProps | ButtonProps;
type InnerCardProps = CardLinkProps | CardButtonProps;

export const Card = React.forwardRef<HTMLDivElement, CardProps>(
const InnerCard = React.forwardRef<HTMLDivElement, InnerCardProps>(
(
{
children,
Expand Down Expand Up @@ -120,8 +121,95 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
}
);

interface CardPropsBase {
action?: React.ReactNode;
containerClassName?: string;
className?: string;
variant?: CardVariantType;
size?: CardSizeType;
}

interface CardPropsWithLink
extends CardPropsBase,
Omit<CardLinkProps, keyof CardPropsBase> {
href: string;
onClick?: never;
}

interface CardPropsWithButton
extends CardPropsBase,
Omit<CardButtonProps, keyof CardPropsBase> {
href?: never;
}

export type CardProps = CardPropsWithLink | CardPropsWithButton;

export const Card = React.forwardRef<HTMLDivElement, CardProps>(
({ containerClassName, className, action, ...props }, ref) => {
return (
<div
className={cn("s-group/card s-relative", containerClassName)}
ref={ref}
>
<InnerCard className={cn("s-h-full s-w-full", className)} {...props} />
{action && <CardActions>{action}</CardActions>}
</div>
);
}
);
Card.displayName = "Card";

const CardActions = React.forwardRef<
HTMLDivElement,
React.ComponentPropsWithoutRef<"div"> & {
children: React.ReactNode;
}
>(({ children, ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
"s-absolute s-right-3 s-top-3 s-opacity-0 s-transition-opacity",
"s-opacity-0 group-focus-within/card:s-opacity-100 group-hover/card:s-opacity-100"
)}
{...props}
>
{children}
</div>
);
});

CardActions.displayName = "CardActions";

export const CardActionButton = React.forwardRef<
HTMLButtonElement,
ButtonProps
>(
(
{
className,
size = "mini",
variant = "outline",
icon = XMarkIcon,
...props
},
ref
) => {
return (
<Button
ref={ref}
size={size}
variant={variant}
icon={icon}
className={className}
{...props}
/>
);
}
);

CardActionButton.displayName = "CardActionButton";

export const CardGrid = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
Expand Down
8 changes: 6 additions & 2 deletions sparkle/src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,14 @@ export { AssistantPreview } from "./AssistantPreview";
export { Avatar } from "./Avatar";
export { BarHeader } from "./BarHeader";
export { Breadcrumbs } from "./Breadcrumbs";
export type { ButtonProps, RegularButtonProps } from "./Button";
export type {
ButtonProps,
MiniButtonProps,
RegularButtonProps,
} from "./Button";
export { Button } from "./Button";
export type { CardProps } from "./Card";
export { Card, CardGrid } from "./Card";
export { Card, CardActionButton, CardGrid } from "./Card";
export type { CheckboxProps } from "./Checkbox";
export {
Checkbox,
Expand Down
2 changes: 1 addition & 1 deletion sparkle/src/stories/AssistantCard.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const ddMenu = (
export const AssistantCardExample = () => (
<div className="s-flex s-flex-col s-gap-4">
<h2>List</h2>
<div className="s-grid s-grid-cols-2">
<div className="s-grid s-grid-cols-2 s-gap-4">
<LargeAssistantCard
title={"@gpt4"}
description={"OpenAI's most powerful and recent model (128k context)."}
Expand Down
Loading

0 comments on commit 17191ee

Please sign in to comment.