@m3000/market 0.0.1 → 0.0.2

package/src/components/blocks/auction/AuctionSuggestedBids.tsx

@@ -1,203 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Button, Scale, Text } from "@/components/primitives";
-import { cn } from "@/lib";
-import { getProjectedRankForPrice } from "@/utils";
-import { useAuctionContext } from "./AuctionContext";
-
-export interface SuggestedBidContextValue {
-  value: bigint;
-  display: string;
-  position: number;
-  index: number;
-  isSelected: boolean;
-  onSelect: () => void;
-  disabled: boolean;
-  projectedRank: number | null;
-  isWinning: boolean;
-}
-
-const SuggestedBidContext =
-  React.createContext<SuggestedBidContextValue | null>(null);
-
-function useSuggestedBid(): SuggestedBidContextValue {
-  const context = React.useContext(SuggestedBidContext);
-  if (!context) {
-    throw new Error(
-      "useSuggestedBid must be used within AuctionSuggestedBids.Item",
-    );
-  }
-  return context;
-}
-
-export interface AuctionSuggestedBidsProps {
-  className?: string;
-  count?: number;
-  children: (context: SuggestedBidContextValue) => React.ReactNode;
-}
-
-function AuctionSuggestedBidsRoot({
-  className,
-  count = 4,
-  children,
-}: AuctionSuggestedBidsProps): React.ReactElement | null {
-  const {
-    minBidValue,
-    tickConfig,
-    tickSize,
-    isAuctionEnded,
-    bidValue,
-    setBidValue,
-    formatPrice,
-    currencySymbol,
-    bids,
-    setShowBidPreview,
-    lockedBid,
-    userBids,
-    mergedForRank,
-    maxTotalItems,
-  } = useAuctionContext();
-
-  const lockedBidId = React.useMemo(() => {
-    if (lockedBid === null) return null;
-    const lockedUserBid = userBids.find(
-      (ub) => ub.globalBidId === lockedBid.bidId,
-    );
-    return lockedUserBid?.id ?? null;
-  }, [lockedBid, userBids]);
-
-  const bidsForRankProjection = React.useMemo(() => {
-    if (lockedBidId === null) return mergedForRank;
-    return mergedForRank.filter((b) => b.id !== lockedBidId);
-  }, [mergedForRank, lockedBidId]);
-
-  const getProjectedRank = React.useCallback(
-    (priceValue: bigint) => {
-      return getProjectedRankForPrice(
-        priceValue,
-        bidsForRankProjection,
-        maxTotalItems,
-      );
-    },
-    [bidsForRankProjection, maxTotalItems],
-  );
-
-  if (isAuctionEnded) {
-    return null;
-  }
-
-  const getTickSize = (value: bigint): bigint => {
-    if (!tickConfig) return tickSize;
-    return value > tickConfig.threshold
-      ? tickConfig.largeTickSize
-      : tickConfig.smallTickSize;
-  };
-
-  const effectiveMinBid =
-    lockedBid !== null && lockedBid.priceValue > minBidValue
-      ? lockedBid.priceValue
-      : minBidValue;
-
-  const highestBid =
-    bids.length > 0 ? BigInt(bids[0].price) : effectiveMinBid * 3n;
-
-  const leadingBid = highestBid + getTickSize(highestBid);
-  const maxBid =
-    leadingBid > effectiveMinBid ? leadingBid : effectiveMinBid * 3n;
-
-  const selectedValue = bidValue;
-  const disabled = isAuctionEnded;
-
-  return (
-    <Scale.Linear
-      domain={[effectiveMinBid, maxBid]}
-      getTickSize={getTickSize}
-      snapMode="up"
-      className={cn("grid grid-cols-2 gap-2", className)}
-    >
-      <Scale.Ticks count={count}>
-        {(
-          { value, position }: { value: bigint; position: number },
-          index: number,
-        ) => {
-          const v = value;
-          const display = `${formatPrice(v)} ${currencySymbol}`;
-          const isSelected = v === selectedValue;
-          const { rank: projectedRank, isWinning } = getProjectedRank(v);
-
-          const contextValue: SuggestedBidContextValue = {
-            value: v,
-            display,
-            position,
-            index,
-            isSelected,
-            onSelect: () => {
-              setBidValue(v);
-              setShowBidPreview(true);
-            },
-            disabled,
-            projectedRank,
-            isWinning,
-          };
-
-          return (
-            <SuggestedBidContext.Provider value={contextValue}>
-              {children(contextValue)}
-            </SuggestedBidContext.Provider>
-          );
-        }}
-      </Scale.Ticks>
-    </Scale.Linear>
-  );
-}
-
-interface AuctionSuggestedBidsItemProps {
-  labels?: string[];
-}
-
-function AuctionSuggestedBidsItem({
-  labels = ["Minimum", "Safe Entry", "Competitive", "Leading"],
-}: AuctionSuggestedBidsItemProps): React.ReactElement {
-  const context = useSuggestedBid();
-  const label = labels[context.index] ?? labels[labels.length - 1] ?? "Bid";
-
-  return (
-    <Button
-      type="button"
-      color="tertiary"
-      active={context.isSelected}
-      className="h-auto w-full items-start justify-between gap-2 px-3 py-2.5 text-left"
-      disabled={context.disabled}
-      onClick={context.onSelect}
-      size="card"
-    >
-      <div className="flex flex-col">
-        <Text color="secondary" size="1">
-          {label}
-        </Text>
-        <Text>{context.display}</Text>
-      </div>
-      {context.projectedRank != null && (
-        <span className="flex shrink-0 flex-col">
-          <Text color="secondary" size="1">
-            Rank
-          </Text>
-          <Text>#{context.projectedRank}</Text>
-        </span>
-      )}
-    </Button>
-  );
-}
-
-interface AuctionSuggestedBidsComponent {
-  Root: typeof AuctionSuggestedBidsRoot;
-  Item: typeof AuctionSuggestedBidsItem;
-}
-
-export const AuctionSuggestedBids: AuctionSuggestedBidsComponent = {
-  Root: AuctionSuggestedBidsRoot,
-  Item: AuctionSuggestedBidsItem,
-};
-
-export { useSuggestedBid };

package/src/components/blocks/auction/AuctionYourBidCard.tsx

@@ -1,125 +0,0 @@
-"use client";
-
-import { Button, Text } from "@/components/primitives";
-import { cn } from "@/lib";
-import type { AuctionUserBid } from "@/types";
-import { formatDateTime } from "@/utils";
-
-export interface AuctionYourBidCardProps {
-  bid: AuctionUserBid;
-  getRankForBid: (bidId: string) => number | null;
-  lockedBidId: bigint | null;
-  onLockForTopUp: (bidId: bigint, priceValue: bigint) => void;
-  onCancelTopUp: () => void;
-  isAuctionEnded: boolean;
-  onClaim?: (bidId: string) => Promise<boolean>;
-  formatPrice?: (priceValue: bigint) => string;
-  currencySymbol?: string;
-}
-
-function getBidStatusLabel(
-  status: AuctionUserBid["status"],
-  isWinning: boolean,
-): string {
-  if (status === "claimed") return "Won & Claimed";
-  if (isWinning) return "Winning";
-  if (status === "refunded") return "Refunded";
-  return "Outbid";
-}
-
-export function AuctionYourBidCard({
-  bid,
-  getRankForBid,
-  lockedBidId,
-  onLockForTopUp,
-  onCancelTopUp,
-  isAuctionEnded,
-  onClaim,
-  formatPrice = (v) =>
-    (Number(v) / 1e18).toLocaleString("en-US", {
-      minimumFractionDigits: 3,
-      maximumFractionDigits: 3,
-    }),
-  currencySymbol = "USD",
-}: AuctionYourBidCardProps): React.ReactElement {
-  const rank = getRankForBid(bid.id);
-  const isLocked = lockedBidId !== null && bid.globalBidId === lockedBidId;
-
-  return (
-    <div
-      className={cn(
-        "rounded-xs border bg-muted p-4",
-        isLocked ? "border-success" : "border-transparent",
-      )}
-    >
-      <div className="flex items-start justify-between gap-2">
-        <Text size="1" color="tertiary">
-          Rank #{rank ?? "-"}
-        </Text>
-        <Text
-          size="1"
-          color="tertiary"
-          className="tabular-nums"
-          suppressHydrationWarning
-        >
-          {formatDateTime(bid.createdAt)}
-        </Text>
-      </div>
-      <div className="flex justify-between">
-        <Text size="2" className="mt-2">
-          {formatPrice(bid.price)} {currencySymbol}
-        </Text>
-        <div className="mt-2 flex items-center gap-1.5">
-          {bid.isWinning ? (
-            <>
-              <div className="size-4 rounded-full bg-success" aria-hidden />
-              <Text size="2" color="success">
-                {getBidStatusLabel(bid.status, bid.isWinning)}
-              </Text>
-            </>
-          ) : (
-            <>
-              <div className="size-4 rounded-full bg-destructive" aria-hidden />
-              <Text size="2" color="error">
-                {getBidStatusLabel(bid.status, bid.isWinning)}
-              </Text>
-            </>
-          )}
-        </div>
-      </div>
-      {bid.status === "claimed" ? (
-        <Text
-          size="1"
-          color="tertiary"
-          className="mt-2"
-          suppressHydrationWarning
-        >
-          Claimed {bid.claimedAt ? formatDateTime(bid.claimedAt) : ""}
-        </Text>
-      ) : bid.isWinning && bid.status === "active" && onClaim ? (
-        <Button
-          color="secondary"
-          className="mt-3 w-full"
-          onClick={() => onClaim(bid.id)}
-        >
-          Claim
-        </Button>
-      ) : null}
-      {bid.isWinning && !isAuctionEnded ? (
-        <div className="mt-3">
-          <Button
-            color="secondary"
-            className="w-full"
-            onClick={() =>
-              isLocked
-                ? onCancelTopUp()
-                : onLockForTopUp(bid.globalBidId, bid.price)
-            }
-          >
-            {isLocked ? "Cancel top-up" : "Top up"}
-          </Button>
-        </div>
-      ) : null}
-    </div>
-  );
-}

package/src/components/blocks/auction/AuctionYourBids.tsx

@@ -1,61 +0,0 @@
-"use client";
-
-import { Text } from "@/components/primitives";
-import { useAuctionContext } from "./AuctionContext";
-import { AuctionYourBidCard } from "./AuctionYourBidCard";
-
-export interface AuctionYourBidsProps {
-  className?: string;
-}
-
-export function AuctionYourBids({
-  className,
-}: AuctionYourBidsProps): React.ReactElement | null {
-  const {
-    userBids,
-    getRankForBid,
-    lockedBid,
-    setLockedBid,
-    isAuctionEnded,
-    handleClaimEdition,
-    formatPrice,
-    currencySymbol,
-  } = useAuctionContext();
-
-  if (userBids.length === 0) return null;
-
-  const onLockForTopUp = (bidId: bigint, priceValue: bigint) => {
-    setLockedBid({ bidId, priceValue });
-  };
-
-  const onCancelTopUp = () => setLockedBid(null);
-
-  return (
-    <div className={className}>
-      <Text
-        as="h3"
-        color="tertiary"
-        className="mb-3 shrink-0"
-        aria-label={`Your Bids (${userBids.length})`}
-      >
-        Your Bids ({userBids.length})
-      </Text>
-      <div className="-mr-1 min-h-0 flex-1 space-y-3 overflow-y-auto py-1 pr-1">
-        {userBids.map((bid) => (
-          <AuctionYourBidCard
-            key={bid.id}
-            bid={bid}
-            getRankForBid={getRankForBid}
-            lockedBidId={lockedBid?.bidId ?? null}
-            onLockForTopUp={onLockForTopUp}
-            onCancelTopUp={onCancelTopUp}
-            isAuctionEnded={isAuctionEnded}
-            onClaim={handleClaimEdition}
-            formatPrice={formatPrice}
-            currencySymbol={currencySymbol}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/components/blocks/auction/index.ts

@@ -1,42 +0,0 @@
-export type { AuctionProps } from "./Auction";
-export { Auction, useAuctionContext } from "./Auction";
-export type { AuctionArtworkProps } from "./AuctionArtwork";
-export { AuctionArtwork } from "./AuctionArtwork";
-export { AuctionBidForm } from "./AuctionBidForm";
-export type { AuctionBidInputProps } from "./AuctionBidInput";
-export { AuctionBidInput } from "./AuctionBidInput";
-export type { AuctionProviderProps } from "./AuctionContext";
-export { AuctionProvider } from "./AuctionContext";
-export type { AuctionInfoProps } from "./AuctionInfo";
-export { AuctionInfo } from "./AuctionInfo";
-export type {
-  AuctionBiddingPanelProps,
-  AuctionDetailsBodyProps,
-  AuctionDetailsFooterProps,
-  AuctionDetailsHeaderProps,
-  AuctionDetailsProps,
-  AuctionLayoutProps,
-  AuctionRankingsContainerProps,
-} from "./AuctionLayout";
-export {
-  AuctionBiddingPanel,
-  AuctionDetails,
-  AuctionDetailsBody,
-  AuctionDetailsFooter,
-  AuctionDetailsHeader,
-  AuctionLayout,
-  AuctionRankingsContainer,
-} from "./AuctionLayout";
-export type { AuctionRankingsProps } from "./AuctionRankings";
-export { AuctionRankings, RankingsSkeleton } from "./AuctionRankings";
-export type { AuctionStatusTagProps } from "./AuctionStatusTag";
-export { AuctionStatusTag } from "./AuctionStatusTag";
-export type {
-  AuctionSuggestedBidsProps,
-  SuggestedBidContextValue,
-} from "./AuctionSuggestedBids";
-export { AuctionSuggestedBids, useSuggestedBid } from "./AuctionSuggestedBids";
-export type { AuctionYourBidCardProps } from "./AuctionYourBidCard";
-export { AuctionYourBidCard } from "./AuctionYourBidCard";
-export type { AuctionYourBidsProps } from "./AuctionYourBids";
-export { AuctionYourBids } from "./AuctionYourBids";

package/src/components/blocks/index.ts

@@ -1 +0,0 @@
-export * from "./auction";

package/src/components/index.ts

@@ -1,2 +0,0 @@
-export * from "./blocks";
-export * from "./primitives";

package/src/components/primitives/Button.tsx

@@ -1,183 +0,0 @@
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import { IconLoader2 } from "@tabler/icons-react";
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-import { cn } from "@/lib/cn";
-
-type ButtonColor =
-  | "primary"
-  | "secondary"
-  | "tertiary"
-  | "ghost"
-  | "destructive"
-  | "link";
-type ButtonSize =
-  | "default"
-  | "xs"
-  | "sm"
-  | "lg"
-  | "xl"
-  | "icon"
-  | "icon-xs"
-  | "icon-sm"
-  | "icon-lg"
-  | "card";
-
-interface ButtonVariantProps {
-  color?: ButtonColor;
-  size?: ButtonSize;
-  className?: string;
-}
-
-const buttonVariants = cva(
-  [
-    // Base layout & typography
-    "inline-flex cursor-pointer items-center justify-center gap-1.5",
-    "font-sans text-sm leading-none font-medium whitespace-nowrap",
-    "shrink-0 select-none",
-    // Transitions
-    "transition-all duration-150 ease-out",
-    // SVG children
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    // Focus ring
-    "outline-none",
-    "focus-visible:ring-2 focus-visible:ring-offset-2",
-    "focus-visible:ring-ring focus-visible:ring-offset-background",
-    // Disabled - prevent interaction
-    "disabled:pointer-events-none disabled:cursor-not-allowed aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed",
-    // aria-invalid
-    "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/30",
-  ].join(" "),
-  {
-    variants: {
-      color: {
-        primary: [
-          "border border-solid",
-          "border-primary bg-primary text-primary-foreground",
-          "hover:border-primary-hover hover:bg-primary-hover",
-          "active:opacity-90",
-          "shadow-[0_1px_2px_0_rgb(0,0,0,0.08)]",
-          "disabled:opacity-50 aria-disabled:opacity-50",
-        ].join(" "),
-
-        secondary: [
-          "border border-solid",
-          "border-border bg-transparent text-foreground",
-          "hover:border-input hover:bg-accent",
-          "active:border-input active:bg-accent-active",
-          "data-[state=active]:border-input data-[state=active]:bg-accent-active",
-          "shadow-[0_1px_2px_0_rgb(0,0,0,0.04)]",
-          "disabled:opacity-50 aria-disabled:opacity-50",
-        ].join(" "),
-
-        tertiary: [
-          "border border-solid",
-          "border-border bg-muted text-muted-foreground",
-          "hover:border-input hover:bg-accent-hover hover:text-foreground",
-          "active:bg-accent-active active:text-foreground",
-          "data-[state=active]:bg-accent-active data-[state=active]:text-foreground",
-          "disabled:opacity-50 aria-disabled:opacity-50",
-        ].join(" "),
-
-        ghost: [
-          "border border-transparent bg-transparent",
-          "text-muted-foreground",
-          "hover:bg-accent hover:text-foreground",
-          "active:bg-accent-active active:text-foreground",
-          "data-[state=active]:bg-accent-active data-[state=active]:text-foreground",
-          "disabled:text-disabled-foreground",
-          "aria-disabled:text-disabled-foreground",
-        ].join(" "),
-
-        destructive: [
-          "border border-solid",
-          "border-destructive bg-destructive text-destructive-foreground",
-          "hover:border-destructive-hover hover:bg-destructive-hover",
-          "active:opacity-90",
-          "shadow-[0_1px_2px_0_rgb(0,0,0,0.08)]",
-          "disabled:opacity-50 aria-disabled:opacity-50",
-        ].join(" "),
-
-        link: [
-          "border-transparent bg-transparent",
-          "text-foreground underline-offset-4",
-          "hover:underline",
-          "h-auto px-0 py-0",
-          "disabled:text-disabled-foreground disabled:no-underline",
-          "aria-disabled:text-disabled-foreground aria-disabled:no-underline",
-        ].join(" "),
-      },
-
-      size: {
-        default: "h-9 rounded-md px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded px-2 text-xs has-[>svg]:px-1.5",
-        sm: "h-8 gap-1 rounded-md px-3 text-xs has-[>svg]:px-2.5",
-        lg: "h-10 rounded-lg px-5 text-[15px] has-[>svg]:px-4",
-        xl: "h-12 rounded-lg px-6 text-[15px] font-semibold has-[>svg]:px-5",
-        icon: "size-9 rounded-md",
-        "icon-xs": "size-6 rounded",
-        "icon-sm": "size-8 rounded-md",
-        "icon-lg": "size-10 rounded-lg",
-        card: "min-h-[4rem] rounded-md px-4 py-3",
-      },
-    },
-    defaultVariants: {
-      color: "primary",
-      size: "default",
-    },
-  },
-) as (props?: ButtonVariantProps) => string;
-
-type ButtonVariants = typeof buttonVariants;
-
-export type ButtonProps = React.ComponentProps<typeof ButtonPrimitive> &
-  VariantProps<ButtonVariants> & {
-    loading?: boolean;
-    active?: boolean;
-  };
-
-export type ButtonElement = React.ComponentRef<"button">;
-
-export function Button({
-  className,
-  color,
-  size,
-  disabled,
-  loading,
-  children,
-  active,
-  ...props
-}: ButtonProps): React.ReactElement {
-  const _disabled = disabled || loading;
-
-  const _children = loading ? (
-    <>
-      <span className="invisible contents">{children}</span>
-      <span className="absolute inset-0 flex items-center justify-center">
-        <IconLoader2 aria-hidden className="size-4 animate-spin" />
-      </span>
-    </>
-  ) : (
-    children
-  );
-
-  return (
-    <ButtonPrimitive
-      data-state={active ? "active" : undefined}
-      disabled={_disabled}
-      focusableWhenDisabled
-      className={cn(
-        buttonVariants({ color, size }),
-        {
-          relative: loading,
-        },
-        className,
-      )}
-      {...props}
-    >
-      {_children}
-    </ButtonPrimitive>
-  );
-}
-
-export { buttonVariants };