@m3000/market 0.0.1

package/src/components/primitives/ranked-list/Ranking.tsx

@@ -0,0 +1,454 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/cn";
+import { Separator, Text } from "..";
+
+interface SlotSpec {
+  key: string;
+  atIndex: number;
+  children: SlotProps["children"];
+}
+
+interface SlotContext {
+  globalIndex: number;
+  groupIndex: number;
+  rank: number;
+  rankInGroup: number;
+  isFirstInGroup: boolean;
+  isLastInGroup: boolean;
+  isLastItem: boolean;
+}
+
+type SlotChildren =
+  | React.ReactNode
+  | ((context: SlotContext) => React.ReactNode);
+
+type ListEntry<T> =
+  | { type: "item"; item: T; key: string }
+  | { type: "slot"; spec: SlotSpec };
+
+interface RankingContextValue<T> {
+  items: T[];
+  entries: ListEntry<T>[];
+  boundaries: number[];
+  labels: string[];
+  getKey: (item: T) => string;
+}
+
+interface GroupContextValue<T> {
+  groupIndex: number;
+  groupLabel: string;
+  entries: ListEntry<T>[];
+  startIndex: number;
+  totalEntryCount: number;
+}
+
+interface GroupItemContextValue<T> {
+  item: T;
+  globalIndex: number;
+  groupIndex: number;
+  rank: number;
+  rankInGroup: number;
+  isFirstInGroup: boolean;
+  isLastInGroup: boolean;
+  isLastItem: boolean;
+}
+
+const RankingContext = React.createContext<RankingContextValue<unknown> | null>(
+  null,
+);
+
+function useRanking<T>(): RankingContextValue<T> {
+  const context = React.useContext(RankingContext);
+  if (!context) {
+    throw new Error("useRanking must be used within Ranking.Root");
+  }
+  return context as RankingContextValue<T>;
+}
+
+const GroupContext = React.createContext<GroupContextValue<unknown> | null>(
+  null,
+);
+
+function useGroup<T>(): GroupContextValue<T> {
+  const context = React.useContext(GroupContext);
+  if (!context) {
+    throw new Error("useGroup must be used within Ranking.Group");
+  }
+  return context as GroupContextValue<T>;
+}
+
+const GroupItemContext =
+  React.createContext<GroupItemContextValue<unknown> | null>(null);
+
+function useGroupItem<T>(): GroupItemContextValue<T> {
+  const context = React.useContext(GroupItemContext);
+  if (!context) {
+    throw new Error("useGroupItem must be used within Ranking.GroupItem");
+  }
+  return context as GroupItemContextValue<T>;
+}
+
+interface EmptyProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+function Empty({ children, className }: EmptyProps): React.ReactElement {
+  return (
+    <div className={cn("flex flex-1 items-center justify-center", className)}>
+      {children}
+    </div>
+  );
+}
+
+interface SlotProps {
+  slotKey: string;
+  atIndex: number;
+  children: SlotChildren;
+}
+
+function Slot({
+  slotKey: _slotKey,
+  atIndex: _atIndex,
+  children: _children,
+}: SlotProps): React.ReactElement | null {
+  return null;
+}
+
+function isElementOfType<P>(
+  child: React.ReactNode,
+  component: React.ComponentType<P>,
+): child is React.ReactElement<P> {
+  return React.isValidElement(child) && child.type === component;
+}
+
+interface RankingProps<T> {
+  items: T[];
+  children: React.ReactNode;
+  getKey: (item: T) => string;
+  boundaries?: number[];
+  labels?: string[];
+  className?: string;
+}
+
+function RankingRoot<T>({
+  items,
+  children,
+  getKey,
+  boundaries = [],
+  labels = [],
+  className,
+}: RankingProps<T>): React.ReactElement {
+  const childArray = React.Children.toArray(children);
+
+  const emptyChild = childArray.find((child) => isElementOfType(child, Empty));
+
+  const slots = childArray.flatMap((child) => {
+    if (!isElementOfType(child, Slot)) {
+      return [];
+    }
+
+    return [
+      {
+        key: child.props.slotKey,
+        atIndex: child.props.atIndex,
+        children: child.props.children,
+      } satisfies SlotSpec,
+    ];
+  });
+
+  const otherChildren = childArray.filter(
+    (child) => !isElementOfType(child, Empty) && !isElementOfType(child, Slot),
+  );
+
+  const entries = React.useMemo<ListEntry<T>[]>(() => {
+    const result: ListEntry<T>[] = items.map((item) => ({
+      type: "item" as const,
+      item,
+      key: getKey(item),
+    }));
+
+    const sortedSlots = [...slots].sort((a, b) => a.atIndex - b.atIndex);
+
+    let offset = 0;
+    for (const spec of sortedSlots) {
+      const slotEntry: ListEntry<T> = { type: "slot", spec };
+      const targetIndex = Math.max(0, Math.min(spec.atIndex, items.length));
+      const insertAt = targetIndex + offset;
+      result.splice(insertAt, 0, slotEntry);
+      offset++;
+    }
+
+    return result;
+  }, [items, slots, getKey]);
+
+  if (entries.length === 0) {
+    return (
+      <div className={className}>
+        {emptyChild ? (
+          emptyChild
+        ) : (
+          <Empty>
+            <Text color="tertiary">No items</Text>
+          </Empty>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      <RankingContext.Provider
+        value={{
+          items: items as unknown[],
+          entries: entries as ListEntry<unknown>[],
+          boundaries,
+          labels,
+          getKey: getKey as (item: unknown) => string,
+        }}
+      >
+        {otherChildren}
+      </RankingContext.Provider>
+    </div>
+  );
+}
+
+interface GroupProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+function Group({ children, className }: GroupProps): React.ReactElement {
+  const { entries, boundaries, labels } = useRanking();
+
+  const groups: Array<{
+    label: string;
+    startIndex: number;
+    entries: ListEntry<unknown>[];
+  }> = [];
+  let currentGroupEntries: ListEntry<unknown>[] = [];
+  let currentGroupStartIndex = 0;
+  let currentGroupIndex = 0;
+  let nextBoundary = boundaries[0] ?? Infinity;
+
+  entries.forEach((entry, index) => {
+    if (index >= nextBoundary) {
+      groups.push({
+        label: labels[currentGroupIndex] ?? `Group ${currentGroupIndex + 1}`,
+        startIndex: currentGroupStartIndex,
+        entries: currentGroupEntries,
+      });
+      currentGroupEntries = [];
+      currentGroupStartIndex = index;
+      currentGroupIndex++;
+      nextBoundary = boundaries[currentGroupIndex] ?? Infinity;
+    }
+    currentGroupEntries.push(entry);
+  });
+
+  if (currentGroupEntries.length > 0) {
+    groups.push({
+      label: labels[currentGroupIndex] ?? `Group ${currentGroupIndex + 1}`,
+      startIndex: currentGroupStartIndex,
+      entries: currentGroupEntries,
+    });
+  }
+
+  const childArray = React.Children.toArray(children);
+  const dividerChildren = childArray.filter(
+    (child) => React.isValidElement(child) && child.type === GroupDivider,
+  );
+  const itemChildren = childArray.filter(
+    (child) => !React.isValidElement(child) || child.type !== GroupDivider,
+  );
+
+  return (
+    <>
+      {groups.map((group, groupIndex) => (
+        <GroupContext.Provider
+          key={`${group.startIndex}-${group.label}`}
+          value={{
+            groupIndex,
+            groupLabel: group.label,
+            entries: group.entries,
+            startIndex: group.startIndex,
+            totalEntryCount: entries.length,
+          }}
+        >
+          <div>
+            {dividerChildren}
+            <ol
+              className={cn("m-0 list-none p-0", className)}
+              start={group.startIndex + 1}
+            >
+              {itemChildren}
+            </ol>
+          </div>
+        </GroupContext.Provider>
+      ))}
+    </>
+  );
+}
+
+interface GroupItemProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+function GroupItem({
+  children,
+  className,
+}: GroupItemProps): React.ReactElement {
+  const { entries, startIndex, groupIndex, totalEntryCount } =
+    useGroup<unknown>();
+  const { getKey } = useRanking<unknown>();
+
+  return (
+    <>
+      {entries.map((entry, entryIndexInGroup) => {
+        const globalIndex = startIndex + entryIndexInGroup;
+        const sharedContext = {
+          globalIndex,
+          groupIndex,
+          rank: globalIndex + 1,
+          rankInGroup: entryIndexInGroup + 1,
+          isFirstInGroup: entryIndexInGroup === 0,
+          isLastInGroup: entryIndexInGroup === entries.length - 1,
+          isLastItem: globalIndex === totalEntryCount - 1,
+        };
+
+        if (entry.type === "slot") {
+          return (
+            <li key={entry.spec.key} className={className}>
+              {typeof entry.spec.children === "function"
+                ? entry.spec.children(sharedContext)
+                : entry.spec.children}
+            </li>
+          );
+        }
+
+        const context: GroupItemContextValue<unknown> = {
+          item: entry.item,
+          ...sharedContext,
+        };
+
+        return (
+          <GroupItemContext.Provider key={getKey(entry.item)} value={context}>
+            <li className={className}>{children}</li>
+          </GroupItemContext.Provider>
+        );
+      })}
+    </>
+  );
+}
+
+interface GroupItemIndexProps {
+  children?: (context: {
+    globalIndex: number;
+    rank: number;
+    groupIndex: number;
+  }) => React.ReactNode;
+  className?: string;
+}
+
+function GroupItemIndex({
+  children,
+  className,
+}: GroupItemIndexProps): React.ReactElement | null {
+  const { globalIndex, rank, groupIndex } = useGroupItem();
+
+  if (children) {
+    return <>{children({ globalIndex, rank, groupIndex })}</>;
+  }
+
+  return (
+    <Text color="tertiary" className={cn("w-8 shrink-0", className)}>
+      #{rank}
+    </Text>
+  );
+}
+
+interface GroupItemValueProps<T> {
+  children: (item: T, context: GroupItemContextValue<T>) => React.ReactNode;
+}
+
+function GroupItemValue<T>({
+  children,
+}: GroupItemValueProps<T>): React.ReactElement | null {
+  const groupItemContext = useGroupItem<T>();
+  return <>{children(groupItemContext.item, groupItemContext)}</>;
+}
+
+interface GroupDividerProps {
+  children?: (context: {
+    label: string;
+    groupIndex: number;
+  }) => React.ReactNode;
+  className?: string;
+}
+
+function GroupDivider({
+  children,
+  className,
+}: GroupDividerProps): React.ReactElement | null {
+  const { groupLabel, groupIndex } = useGroup();
+
+  if (children) {
+    return (
+      <div
+        data-ranking-group-divider
+        className={cn("sticky top-0 bg-background", className)}
+        style={{ zIndex: 10 + groupIndex }}
+      >
+        {children({ label: groupLabel, groupIndex })}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-ranking-group-divider
+      className={cn("sticky top-0 bg-background", className)}
+      style={{ zIndex: 10 + groupIndex }}
+    >
+      <Separator label={groupLabel} />
+    </div>
+  );
+}
+
+interface RankingComponent {
+  Root: typeof RankingRoot;
+  Empty: typeof Empty;
+  Slot: typeof Slot;
+  Group: typeof Group;
+  GroupItem: typeof GroupItem;
+  GroupItemIndex: typeof GroupItemIndex;
+  GroupItemValue: typeof GroupItemValue;
+  GroupDivider: typeof GroupDivider;
+}
+
+const Ranking = {
+  Root: RankingRoot,
+  Empty,
+  Slot,
+  Group,
+  GroupItem,
+  GroupItemIndex,
+  GroupItemValue,
+  GroupDivider,
+} as RankingComponent;
+
+const RankedList: RankingComponent = Ranking;
+
+type RankedListProps<T> = RankingProps<T>;
+
+export { Ranking, RankedList };
+export type {
+  GroupItemContextValue,
+  RankedListProps,
+  RankingProps,
+  SlotContext,
+  SlotProps,
+};

package/src/components/primitives/ranked-list/index.ts

@@ -0,0 +1,8 @@
+export type {
+  GroupItemContextValue,
+  RankedListProps,
+  RankingProps,
+  SlotContext,
+  SlotProps,
+} from "./Ranking";
+export { RankedList, Ranking } from "./Ranking";

package/src/hooks/index.ts

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

package/src/hooks/useCountdown.ts

@@ -0,0 +1,91 @@
+"use client";
+
+import { useLayoutEffect, useState } from "react";
+import { formatCountdownString } from "@/utils/format";
+
+export interface UseCountdownOptions {
+  /** Stop updating when countdown reaches zero (default: false - keeps counting up) */
+  stopOnExpired?: boolean;
+}
+
+export interface UseCountdownResult {
+  timeString: string | null;
+  remainingMs: number | null;
+  isExpired: boolean;
+}
+
+/**
+ * Returns countdown state that updates every second via requestAnimationFrame.
+ * Only re-renders when the seconds value changes to minimize layout shift.
+ *
+ * @param to - Target date to count down to (null disables the countdown)
+ * @returns Object with formatted timeString, remainingMs, and isExpired flag
+ */
+export function useCountdown(
+  to: Date | null,
+  options?: UseCountdownOptions,
+): UseCountdownResult {
+  const { stopOnExpired = false } = options ?? {};
+
+  const [result, setResult] = useState<UseCountdownResult>(() => {
+    if (!to) return { timeString: null, remainingMs: null, isExpired: false };
+    const remainingMs = to.getTime() - Date.now();
+    return {
+      timeString: formatCountdownString(remainingMs),
+      remainingMs,
+      isExpired: remainingMs <= 0,
+    };
+  });
+
+  useLayoutEffect(() => {
+    if (!to) {
+      setResult({ timeString: null, remainingMs: null, isExpired: false });
+      return;
+    }
+
+    const target = to.getTime();
+    const initialRemainingMs = target - Date.now();
+    setResult({
+      timeString: formatCountdownString(initialRemainingMs),
+      remainingMs: initialRemainingMs,
+      isExpired: initialRemainingMs <= 0,
+    });
+    let lastSeconds = Math.floor(Math.abs(initialRemainingMs) / 1000);
+    let hasExpired = initialRemainingMs <= 0;
+    let frameId: number;
+
+    const tick = () => {
+      const remainingMs = target - Date.now();
+      const absMs = Math.abs(remainingMs);
+      const isExpired = remainingMs <= 0;
+
+      // If stopOnExpired and already expired, don't update
+      if (stopOnExpired && hasExpired) {
+        frameId = requestAnimationFrame(tick);
+        return;
+      }
+
+      if (isExpired) {
+        hasExpired = true;
+      }
+
+      const currentSeconds = Math.floor(absMs / 1000);
+
+      if (currentSeconds !== lastSeconds || (isExpired && lastSeconds !== -2)) {
+        lastSeconds = isExpired ? -2 : currentSeconds;
+        setResult({
+          timeString: formatCountdownString(remainingMs),
+          remainingMs,
+          isExpired,
+        });
+      }
+
+      frameId = requestAnimationFrame(tick);
+    };
+
+    frameId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frameId);
+  }, [to, stopOnExpired]);
+
+  return result;
+}

package/src/index.ts

@@ -0,0 +1,130 @@
+export {
+  Auction,
+  AuctionArtwork,
+  AuctionBidForm,
+  AuctionBidInput,
+  AuctionBiddingPanel,
+  AuctionDetails,
+  AuctionDetailsBody,
+  AuctionDetailsFooter,
+  AuctionDetailsHeader,
+  AuctionInfo,
+  AuctionLayout,
+  AuctionProvider,
+  AuctionRankings,
+  AuctionRankingsContainer,
+  AuctionStatusTag,
+  AuctionSuggestedBids,
+  AuctionYourBidCard,
+  AuctionYourBids,
+  RankingsSkeleton,
+  useAuctionContext,
+  useSuggestedBid,
+} from "./components/blocks/auction";
+export type {
+  AuctionArtworkProps,
+  AuctionBidInputProps,
+  AuctionBiddingPanelProps,
+  AuctionDetailsBodyProps,
+  AuctionDetailsFooterProps,
+  AuctionDetailsHeaderProps,
+  AuctionDetailsProps,
+  AuctionInfoProps,
+  AuctionLayoutProps,
+  AuctionProps,
+  AuctionProviderProps,
+  AuctionRankingsContainerProps,
+  AuctionRankingsProps,
+  AuctionStatusTagProps,
+  AuctionSuggestedBidsProps,
+  AuctionYourBidCardProps,
+  AuctionYourBidsProps,
+  SuggestedBidContextValue,
+} from "./components/blocks/auction";
+export { Button, buttonVariants } from "./components/primitives/Button";
+export type {
+  ButtonElement,
+  ButtonProps,
+} from "./components/primitives/Button";
+export { Countdown } from "./components/primitives/countdown/Countdown";
+export * from "./components/primitives/countdown";
+export { Drawer } from "./components/primitives/Drawer";
+export type { DrawerProps } from "./components/primitives/Drawer";
+export { Feedback } from "./components/primitives/Feedback";
+export { FramedImage } from "./components/primitives/framed-image";
+export type { FramedImageProps } from "./components/primitives/framed-image";
+export { MorphDialog } from "./components/primitives/MorphDialog";
+export type { MorphDialogProps } from "./components/primitives/MorphDialog";
+export { Price, formatPrice } from "./components/primitives/Price";
+export { PriceInput } from "./components/primitives/PriceInput";
+export type {
+  FormatPriceOptions,
+  PriceProps,
+  PriceSymbolProps,
+  PriceValueProps,
+} from "./components/primitives/Price";
+export { Receipt } from "./components/primitives/Receipt";
+export type {
+  ReceiptDiscountProps,
+  ReceiptFeeProps,
+  ReceiptFooterProps,
+  ReceiptHeaderProps,
+  ReceiptItemProps,
+  ReceiptPriceProps,
+  ReceiptProps,
+  ReceiptSeparatorProps,
+  ReceiptSubtotalProps,
+  ReceiptTaxProps,
+  ReceiptTotalProps,
+} from "./components/primitives/Receipt";
+export * from "./components/primitives/ranked-list";
+export { Scale, useScale } from "./components/primitives/Scale";
+export type {
+  ScaleTickContext,
+  ScaleValue,
+  SnapMode,
+} from "./components/primitives/Scale";
+export { Separator } from "./components/primitives/Separator";
+export { Skeleton } from "./components/primitives/Skeleton";
+export type {
+  SkeletonElement,
+  SkeletonProps,
+} from "./components/primitives/Skeleton";
+export {
+  CursorGrowIcon,
+  SteppedInput,
+} from "./components/primitives/SteppedInput";
+export {
+  Tab,
+  Tabs,
+  TabsIndicator,
+  TabsList,
+  TabsPanel,
+} from "./components/primitives/Tabs";
+export type { TabsContextType } from "./components/primitives/Tabs";
+export { Tag } from "./components/primitives/Tag";
+export type { TagElement, TagProps } from "./components/primitives/Tag";
+export { Text, textVariants } from "./components/primitives/Text";
+export type { TextElement, TextProps } from "./components/primitives/Text";
+export { useCountdown } from "./hooks/useCountdown";
+export { cn } from "./lib/cn";
+export { springs, transitions } from "./lib/motion";
+export * from "./types";
+export {
+  formatCountdownString,
+  formatDateTime,
+  formatFullTimestamp,
+  formatShortDate,
+  formatShortRelative,
+  formatWeiToEth,
+  parseEthToWei,
+} from "./utils/format";
+export {
+  getActiveTickSize,
+  isValidTickPrice,
+  roundDownToValidBid,
+} from "./utils/tick-validation";
+export {
+  getProjectedRankForPrice,
+  getSuggestedBidPrices,
+} from "./utils/rank-utils";