@m3000/market 0.0.1 → 0.0.2

package/src/components/primitives/Receipt.tsx

@@ -1,711 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { cn } from "@/lib/cn";
-import { Price } from "./Price";
-import { Separator } from "./Separator";
-
-function toBigInt(value: bigint | number | string): bigint {
-  if (typeof value === "bigint") return value;
-  try {
-    return BigInt(value);
-  } catch {
-    return BigInt(0);
-  }
-}
-
-function scaleValue(
-  value: bigint | number | string,
-  fromDecimals: number,
-  toDecimals: number,
-): bigint {
-  const normalizedValue = toBigInt(value);
-  if (fromDecimals === toDecimals) return normalizedValue;
-  const scale = BigInt(10 ** Math.abs(toDecimals - fromDecimals));
-  return fromDecimals < toDecimals
-    ? normalizedValue * scale
-    : normalizedValue / scale;
-}
-
-function computeTaxFromRate(
-  subtotal: bigint,
-  decimals: number,
-  rate: number,
-): bigint {
-  const subtotalNum = Number(subtotal) / 10 ** decimals;
-  const taxNum = subtotalNum * rate;
-  const multiplier = BigInt(10 ** decimals);
-  return BigInt(Math.round(taxNum * Number(multiplier)));
-}
-
-type ReceiptRowKind =
-  | "item"
-  | "discount"
-  | "fee"
-  | "subtotal"
-  | "tax"
-  | "total";
-
-type ComputedReceiptValues = {
-  subtotals: Map<number, bigint>;
-  taxes: Map<number, bigint>;
-  totals: Map<number, bigint>;
-};
-
-type ReceiptContextValue = {
-  decimals: number;
-  computed: ComputedReceiptValues;
-};
-
-const ReceiptContext = React.createContext<ReceiptContextValue | null>(null);
-
-function useReceiptContext() {
-  const context = React.useContext(ReceiptContext);
-  if (!context) {
-    throw new Error("Receipt components must be used within a Receipt root");
-  }
-  return context;
-}
-
-type ReceiptPriceDefaults = {
-  template: React.ReactNode;
-  maxDecimals: number | undefined;
-  abbreviate: boolean;
-};
-
-const ReceiptPriceContext = React.createContext<ReceiptPriceDefaults | null>(
-  null,
-);
-
-function useReceiptPriceDefaults() {
-  return React.useContext(ReceiptPriceContext);
-}
-
-type ReceiptCalculationDescriptor = {
-  index: number;
-  kind: ReceiptRowKind;
-  decimals: number;
-  value?: bigint | number | string;
-  rate?: number;
-};
-
-type ReceiptInternalIndexProp = {
-  __receiptIndex?: number;
-};
-
-function isElementOfType<P>(
-  child: React.ReactNode,
-  component: React.ComponentType<P>,
-): child is React.ReactElement<P> {
-  return React.isValidElement(child) && child.type === component;
-}
-
-function getDisplayValue(
-  explicitValue: bigint | number | string | undefined,
-  fallbackValue: bigint,
-): bigint {
-  return explicitValue !== undefined ? toBigInt(explicitValue) : fallbackValue;
-}
-
-function computeReceiptValues(
-  descriptors: ReceiptCalculationDescriptor[],
-  receiptDecimals: number,
-): ComputedReceiptValues {
-  const subtotals = new Map<number, bigint>();
-  const taxes = new Map<number, bigint>();
-  const totals = new Map<number, bigint>();
-
-  let subtotalAccumulator = BigInt(0);
-  let positiveAccumulator = BigInt(0);
-  let negativeAccumulator = BigInt(0);
-
-  for (const descriptor of descriptors) {
-    switch (descriptor.kind) {
-      case "item": {
-        const scaledValue = scaleValue(
-          descriptor.value ?? 0,
-          descriptor.decimals,
-          receiptDecimals,
-        );
-        subtotalAccumulator += scaledValue;
-        positiveAccumulator += scaledValue;
-        break;
-      }
-      case "discount": {
-        const scaledValue = scaleValue(
-          descriptor.value ?? 0,
-          descriptor.decimals,
-          receiptDecimals,
-        );
-        negativeAccumulator += scaledValue;
-        break;
-      }
-      case "fee": {
-        const scaledValue = scaleValue(
-          descriptor.value ?? 0,
-          descriptor.decimals,
-          receiptDecimals,
-        );
-        positiveAccumulator += scaledValue;
-        break;
-      }
-      case "subtotal": {
-        subtotals.set(descriptor.index, subtotalAccumulator);
-        break;
-      }
-      case "tax": {
-        const explicitValue = descriptor.value;
-        const computedTax =
-          explicitValue !== undefined
-            ? scaleValue(explicitValue, descriptor.decimals, receiptDecimals)
-            : descriptor.rate !== undefined
-              ? computeTaxFromRate(
-                  scaleValue(
-                    subtotalAccumulator,
-                    receiptDecimals,
-                    descriptor.decimals,
-                  ),
-                  descriptor.decimals,
-                  descriptor.rate,
-                )
-              : BigInt(0);
-        taxes.set(
-          descriptor.index,
-          scaleValue(computedTax, descriptor.decimals, receiptDecimals),
-        );
-        positiveAccumulator += scaleValue(
-          computedTax,
-          descriptor.decimals,
-          receiptDecimals,
-        );
-        break;
-      }
-      case "total": {
-        totals.set(descriptor.index, positiveAccumulator - negativeAccumulator);
-        break;
-      }
-    }
-  }
-
-  return { subtotals, taxes, totals };
-}
-
-export interface ReceiptProps extends React.ComponentProps<"div"> {
-  decimals?: number;
-}
-
-export interface ReceiptPriceProps {
-  maxDecimals?: number;
-  abbreviate?: boolean;
-  children: React.ReactNode;
-}
-
-function ReceiptPrice(_props: ReceiptPriceProps): React.ReactElement {
-  return null as unknown as React.ReactElement;
-}
-
-export interface ReceiptHeaderProps extends React.ComponentProps<"div"> {}
-
-function ReceiptHeader({
-  children,
-  className,
-  ...props
-}: ReceiptHeaderProps): React.ReactElement {
-  return (
-    <div className={cn("text-foreground pb-2", className)} {...props}>
-      {children}
-    </div>
-  );
-}
-
-export interface ReceiptItemProps
-  extends Omit<React.ComponentProps<"div">, "children">,
-    ReceiptInternalIndexProp {
-  label: string;
-  value: bigint | number | string;
-  decimals?: number;
-  maxDecimals?: number;
-  abbreviate?: boolean;
-  children?: React.ReactNode;
-}
-
-function ReceiptItem({
-  label,
-  value,
-  decimals,
-  maxDecimals,
-  abbreviate,
-  children,
-  className,
-  __receiptIndex: _receiptIndex,
-  ...props
-}: ReceiptItemProps): React.ReactElement {
-  const context = useReceiptContext();
-  const defaults = useReceiptPriceDefaults();
-  const itemDecimals = decimals ?? context.decimals;
-  const priceChildren = children ?? defaults?.template;
-  const priceMaxDecimals = maxDecimals ?? defaults?.maxDecimals;
-  const priceAbbreviate = abbreviate ?? defaults?.abbreviate;
-
-  return (
-    <div
-      className={cn("flex items-center justify-between gap-4", className)}
-      {...props}
-    >
-      <span className="text-muted-foreground">{label}</span>
-      <Price
-        value={value}
-        decimals={itemDecimals}
-        maxDecimals={priceMaxDecimals}
-        abbreviate={priceAbbreviate}
-        className="text-foreground"
-      >
-        {priceChildren}
-      </Price>
-    </div>
-  );
-}
-
-export interface ReceiptSeparatorProps
-  extends React.ComponentProps<typeof Separator> {}
-
-function ReceiptSeparator({
-  className,
-  ...props
-}: ReceiptSeparatorProps): React.ReactElement {
-  return <Separator className={cn("my-1", className)} {...props} />;
-}
-
-export interface ReceiptSubtotalProps
-  extends React.ComponentProps<"div">,
-    ReceiptInternalIndexProp {
-  decimals?: number;
-  maxDecimals?: number;
-  abbreviate?: boolean;
-  label?: string;
-  value?: bigint | number | string;
-  children?: React.ReactNode;
-}
-
-function ReceiptSubtotal({
-  label = "Subtotal",
-  value,
-  decimals,
-  maxDecimals,
-  abbreviate,
-  children,
-  className,
-  __receiptIndex: _receiptIndex,
-  ...props
-}: ReceiptSubtotalProps): React.ReactElement {
-  const context = useReceiptContext();
-  const defaults = useReceiptPriceDefaults();
-  const displayDecimals = decimals ?? context.decimals;
-  const priceChildren = children ?? defaults?.template;
-  const priceMaxDecimals = maxDecimals ?? defaults?.maxDecimals;
-  const priceAbbreviate = abbreviate ?? defaults?.abbreviate;
-  const computedSubtotal =
-    _receiptIndex !== undefined
-      ? (context.computed.subtotals.get(_receiptIndex) ?? BigInt(0))
-      : BigInt(0);
-  const displayValue = getDisplayValue(
-    value,
-    scaleValue(computedSubtotal, context.decimals, displayDecimals),
-  );
-
-  return (
-    <div
-      className={cn("flex items-center justify-between gap-4", className)}
-      {...props}
-    >
-      <span className="text-muted-foreground">{label}</span>
-      <Price
-        value={displayValue}
-        decimals={displayDecimals}
-        maxDecimals={priceMaxDecimals}
-        abbreviate={priceAbbreviate}
-        className="text-foreground"
-      >
-        {priceChildren}
-      </Price>
-    </div>
-  );
-}
-
-export interface ReceiptDiscountProps
-  extends Omit<React.ComponentProps<"div">, "children">,
-    ReceiptInternalIndexProp {
-  label: string;
-  value: bigint | number | string;
-  decimals?: number;
-  maxDecimals?: number;
-  abbreviate?: boolean;
-  children?: React.ReactNode;
-}
-
-function ReceiptDiscount({
-  label,
-  value,
-  decimals,
-  maxDecimals,
-  abbreviate,
-  children,
-  className,
-  __receiptIndex: _receiptIndex,
-  ...props
-}: ReceiptDiscountProps): React.ReactElement {
-  const context = useReceiptContext();
-  const defaults = useReceiptPriceDefaults();
-  const displayDecimals = decimals ?? context.decimals;
-  const priceChildren = children ?? defaults?.template;
-  const priceMaxDecimals = maxDecimals ?? defaults?.maxDecimals;
-  const priceAbbreviate = abbreviate ?? defaults?.abbreviate;
-
-  return (
-    <div
-      className={cn("flex items-center justify-between gap-4", className)}
-      {...props}
-    >
-      <span className="text-muted-foreground">{label}</span>
-      <span className="text-foreground">
-        -
-        <Price
-          value={value}
-          decimals={displayDecimals}
-          maxDecimals={priceMaxDecimals}
-          abbreviate={priceAbbreviate}
-          className="text-foreground"
-        >
-          {priceChildren}
-        </Price>
-      </span>
-    </div>
-  );
-}
-
-export interface ReceiptFeeProps
-  extends Omit<React.ComponentProps<"div">, "children">,
-    ReceiptInternalIndexProp {
-  label: string;
-  value: bigint | number | string;
-  decimals?: number;
-  maxDecimals?: number;
-  abbreviate?: boolean;
-  children?: React.ReactNode;
-}
-
-function ReceiptFee({
-  label,
-  value,
-  decimals,
-  maxDecimals,
-  abbreviate,
-  children,
-  className,
-  __receiptIndex: _receiptIndex,
-  ...props
-}: ReceiptFeeProps): React.ReactElement {
-  const context = useReceiptContext();
-  const defaults = useReceiptPriceDefaults();
-  const displayDecimals = decimals ?? context.decimals;
-  const priceChildren = children ?? defaults?.template;
-  const priceMaxDecimals = maxDecimals ?? defaults?.maxDecimals;
-  const priceAbbreviate = abbreviate ?? defaults?.abbreviate;
-
-  return (
-    <div
-      className={cn("flex items-center justify-between gap-4", className)}
-      {...props}
-    >
-      <span className="text-muted-foreground">{label}</span>
-      <Price
-        value={value}
-        decimals={displayDecimals}
-        maxDecimals={priceMaxDecimals}
-        abbreviate={priceAbbreviate}
-        className="text-foreground"
-      >
-        {priceChildren}
-      </Price>
-    </div>
-  );
-}
-
-export interface ReceiptTaxProps
-  extends Omit<React.ComponentProps<"div">, "children">,
-    ReceiptInternalIndexProp {
-  label?: string;
-  value?: bigint | number | string;
-  rate?: number;
-  decimals?: number;
-  maxDecimals?: number;
-  abbreviate?: boolean;
-  children?: React.ReactNode;
-}
-
-function ReceiptTax({
-  label = "Tax",
-  value,
-  rate,
-  decimals,
-  maxDecimals,
-  abbreviate,
-  children,
-  className,
-  __receiptIndex: _receiptIndex,
-  ...props
-}: ReceiptTaxProps): React.ReactElement {
-  const context = useReceiptContext();
-  const defaults = useReceiptPriceDefaults();
-  const displayDecimals = decimals ?? context.decimals;
-  const priceChildren = children ?? defaults?.template;
-  const priceMaxDecimals = maxDecimals ?? defaults?.maxDecimals;
-  const priceAbbreviate = abbreviate ?? defaults?.abbreviate;
-  const computedTax =
-    _receiptIndex !== undefined
-      ? (context.computed.taxes.get(_receiptIndex) ?? BigInt(0))
-      : BigInt(0);
-  const displayValue = getDisplayValue(
-    value,
-    scaleValue(computedTax, context.decimals, displayDecimals),
-  );
-
-  return (
-    <div
-      className={cn("flex items-center justify-between gap-4", className)}
-      {...props}
-    >
-      <span className="text-muted-foreground">
-        {label}
-        {rate !== undefined && (
-          <span> ({parseFloat((rate * 100).toPrecision(10))}%)</span>
-        )}
-      </span>
-      <Price
-        value={displayValue}
-        decimals={displayDecimals}
-        maxDecimals={priceMaxDecimals}
-        abbreviate={priceAbbreviate}
-        className="text-foreground"
-      >
-        {priceChildren}
-      </Price>
-    </div>
-  );
-}
-
-export interface ReceiptTotalProps
-  extends React.ComponentProps<"div">,
-    ReceiptInternalIndexProp {
-  label?: string;
-  value?: bigint | number | string;
-  decimals?: number;
-  maxDecimals?: number;
-  abbreviate?: boolean;
-  children?: React.ReactNode;
-}
-
-function ReceiptTotal({
-  label = "Total",
-  value,
-  decimals,
-  maxDecimals,
-  abbreviate,
-  children,
-  className,
-  __receiptIndex: _receiptIndex,
-  ...props
-}: ReceiptTotalProps): React.ReactElement {
-  const context = useReceiptContext();
-  const defaults = useReceiptPriceDefaults();
-  const displayDecimals = decimals ?? context.decimals;
-  const priceChildren = children ?? defaults?.template;
-  const priceMaxDecimals = maxDecimals ?? defaults?.maxDecimals;
-  const priceAbbreviate = abbreviate ?? defaults?.abbreviate;
-  const computedTotal =
-    _receiptIndex !== undefined
-      ? (context.computed.totals.get(_receiptIndex) ?? BigInt(0))
-      : BigInt(0);
-  const displayValue = getDisplayValue(
-    value,
-    scaleValue(computedTotal, context.decimals, displayDecimals),
-  );
-
-  return (
-    <div
-      className={cn(
-        "text-foreground flex items-center justify-between gap-4 pt-2 font-medium",
-        className,
-      )}
-      {...props}
-    >
-      <span>{label}</span>
-      <span className="text-foreground">
-        <Price
-          value={displayValue}
-          decimals={displayDecimals}
-          maxDecimals={priceMaxDecimals}
-          abbreviate={priceAbbreviate}
-          className="text-foreground"
-        >
-          {priceChildren}
-        </Price>
-      </span>
-    </div>
-  );
-}
-
-export interface ReceiptFooterProps extends React.ComponentProps<"div"> {}
-
-function ReceiptFooter({
-  children,
-  className,
-  ...props
-}: ReceiptFooterProps): React.ReactElement {
-  return (
-    <div
-      className={cn(
-        "pt-2 text-xs leading-[18px] text-muted-foreground",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-function ReceiptRoot({
-  children,
-  className,
-  decimals = 6,
-  ...props
-}: ReceiptProps): React.ReactElement {
-  let priceDefaults: ReceiptPriceDefaults | null = null;
-  const calculationDescriptors: ReceiptCalculationDescriptor[] = [];
-
-  const renderedChildren = React.Children.toArray(children).flatMap(
-    (child, index) => {
-      if (isElementOfType(child, ReceiptPrice)) {
-        const {
-          children: template,
-          maxDecimals,
-          abbreviate = false,
-        } = child.props as ReceiptPriceProps;
-        priceDefaults = { template, maxDecimals, abbreviate };
-        return [];
-      }
-
-      if (!React.isValidElement(child)) {
-        return [child];
-      }
-
-      if (isElementOfType(child, ReceiptItem)) {
-        calculationDescriptors.push({
-          index,
-          kind: "item",
-          value: child.props.value,
-          decimals: child.props.decimals ?? decimals,
-        });
-      } else if (isElementOfType(child, ReceiptDiscount)) {
-        calculationDescriptors.push({
-          index,
-          kind: "discount",
-          value: child.props.value,
-          decimals: child.props.decimals ?? decimals,
-        });
-      } else if (isElementOfType(child, ReceiptFee)) {
-        calculationDescriptors.push({
-          index,
-          kind: "fee",
-          value: child.props.value,
-          decimals: child.props.decimals ?? decimals,
-        });
-      } else if (isElementOfType(child, ReceiptSubtotal)) {
-        calculationDescriptors.push({
-          index,
-          kind: "subtotal",
-          value: child.props.value,
-          decimals: child.props.decimals ?? decimals,
-        });
-      } else if (isElementOfType(child, ReceiptTax)) {
-        calculationDescriptors.push({
-          index,
-          kind: "tax",
-          value: child.props.value,
-          rate: child.props.rate,
-          decimals: child.props.decimals ?? decimals,
-        });
-      } else if (isElementOfType(child, ReceiptTotal)) {
-        calculationDescriptors.push({
-          index,
-          kind: "total",
-          value: child.props.value,
-          decimals: child.props.decimals ?? decimals,
-        });
-      } else {
-        return [child];
-      }
-
-      return [
-        React.cloneElement(
-          child as React.ReactElement<ReceiptInternalIndexProp>,
-          {
-            __receiptIndex: index,
-          },
-        ),
-      ];
-    },
-  );
-
-  const computed = React.useMemo(
-    () => computeReceiptValues(calculationDescriptors, decimals),
-    [decimals],
-  );
-
-  const contextValue = React.useMemo(
-    () => ({ decimals, computed }),
-    [decimals, computed],
-  );
-
-  return (
-    <ReceiptContext value={contextValue}>
-      <ReceiptPriceContext value={priceDefaults}>
-        <div
-          className={cn(
-            "flex flex-col gap-2 text-sm leading-[21px] text-foreground",
-            className,
-          )}
-          {...props}
-        >
-          {renderedChildren}
-        </div>
-      </ReceiptPriceContext>
-    </ReceiptContext>
-  );
-}
-
-export const Receipt: {
-  (props: ReceiptProps): React.ReactElement;
-  Price: typeof ReceiptPrice;
-  Header: typeof ReceiptHeader;
-  Item: typeof ReceiptItem;
-  Separator: typeof ReceiptSeparator;
-  Subtotal: typeof ReceiptSubtotal;
-  Discount: typeof ReceiptDiscount;
-  Fee: typeof ReceiptFee;
-  Tax: typeof ReceiptTax;
-  Total: typeof ReceiptTotal;
-  Footer: typeof ReceiptFooter;
-} = Object.assign(ReceiptRoot, {
-  Price: ReceiptPrice,
-  Header: ReceiptHeader,
-  Item: ReceiptItem,
-  Separator: ReceiptSeparator,
-  Subtotal: ReceiptSubtotal,
-  Discount: ReceiptDiscount,
-  Fee: ReceiptFee,
-  Tax: ReceiptTax,
-  Total: ReceiptTotal,
-  Footer: ReceiptFooter,
-}) as typeof Receipt;