@m3000/market 0.0.1 → 0.0.2

package/src/stories/RankedList.stories.tsx

@@ -1,190 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useMemo, useState } from "react";
-import { Ranking } from "@/components";
-import { Separator, Text } from "@/components/primitives";
-
-interface Player {
-  id: string;
-  name: string;
-  score: number;
-}
-
-const players: Player[] = [
-  { id: "1", name: "Alice", score: 950 },
-  { id: "2", name: "Bob", score: 880 },
-  { id: "3", name: "Charlie", score: 820 },
-  { id: "4", name: "Diana", score: 790 },
-  { id: "5", name: "Eve", score: 750 },
-];
-
-const meta: Meta<typeof Ranking.Root> = {
-  title: "Primitives/Ranking",
-  component: Ranking.Root,
-  parameters: {
-    layout: "centered",
-  },
-  decorators: [
-    (Story) => (
-      <div className="h-125 w-96 overflow-y-auto rounded-lg border border-border bg-background">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-
-function RankingRows() {
-  return (
-    <Ranking.Group>
-      <Ranking.GroupDivider />
-      <Ranking.GroupItem>
-        <Ranking.GroupItemValue>
-          {(player: Player, context) => (
-            <>
-              <div className="flex items-center justify-between px-4 py-3">
-                <div className="flex items-center gap-3">
-                  <Ranking.GroupItemIndex />
-                  <Text>{player.name}</Text>
-                </div>
-                <Text color="secondary">{player.score} pts</Text>
-              </div>
-              {!context.isLastInGroup && <Separator orientation="horizontal" />}
-            </>
-          )}
-        </Ranking.GroupItemValue>
-      </Ranking.GroupItem>
-    </Ranking.Group>
-  );
-}
-
-export const Basic: StoryObj<typeof Ranking.Root> = {
-  render: () => (
-    <Ranking.Root
-      items={players}
-      getKey={(player) => player.id}
-      boundaries={[3]}
-      labels={["Top 3", "Others"]}
-    >
-      <Ranking.Empty>
-        <Text color="tertiary">No players</Text>
-      </Ranking.Empty>
-      <RankingRows />
-    </Ranking.Root>
-  ),
-};
-
-export const CustomGroup: StoryObj<typeof Ranking.Root> = {
-  render: () => (
-    <Ranking.Root
-      items={players}
-      getKey={(player) => player.id}
-      boundaries={[2]}
-      labels={["Qualified", "Chasing"]}
-    >
-      <Ranking.Group>
-        <Ranking.GroupDivider className="px-3 py-2">
-          {({ label, groupIndex }) => (
-            <div className="flex items-center justify-between rounded-md bg-muted px-3 py-2">
-              <Text weight="medium">{label}</Text>
-              <Text color="secondary">
-                {groupIndex === 0 ? "In form" : "Needs a result"}
-              </Text>
-            </div>
-          )}
-        </Ranking.GroupDivider>
-        <Ranking.GroupItem>
-          <Ranking.GroupItemValue>
-            {(player: Player, context) => (
-              <>
-                <div className="flex items-center justify-between px-4 py-3">
-                  <div className="flex items-center gap-3">
-                    <Ranking.GroupItemIndex />
-                    <Text>{player.name}</Text>
-                  </div>
-                  <Text color="secondary">{player.score} pts</Text>
-                </div>
-                {!context.isLastInGroup && (
-                  <Separator orientation="horizontal" />
-                )}
-              </>
-            )}
-          </Ranking.GroupItemValue>
-        </Ranking.GroupItem>
-      </Ranking.Group>
-    </Ranking.Root>
-  ),
-};
-
-export const StaticSlot: StoryObj<typeof Ranking.Root> = {
-  render: () => (
-    <Ranking.Root
-      items={players}
-      getKey={(player) => player.id}
-      boundaries={[3]}
-      labels={["Top 3", "Others"]}
-    >
-      <Ranking.Slot slotKey="reserved" atIndex={1}>
-        <div className="mx-4 my-3 rounded-md border border-dashed border-border bg-muted px-3 py-2">
-          <Text size="2" weight="medium">
-            Reserved position
-          </Text>
-          <Text size="2" color="secondary">
-            Static slot content can be inserted at a fixed ranked index.
-          </Text>
-        </div>
-      </Ranking.Slot>
-      <RankingRows />
-    </Ranking.Root>
-  ),
-};
-
-export const DynamicSlot: StoryObj<typeof Ranking.Root> = {
-  render: () => {
-    const [candidateScore, setCandidateScore] = useState(905);
-    const insertionIndex = useMemo(() => {
-      const index = players.findIndex(
-        (player) => candidateScore >= player.score,
-      );
-      return index === -1 ? players.length : index;
-    }, [candidateScore]);
-
-    return (
-      <div className="flex flex-col">
-        <div className="flex flex-wrap gap-2 border-b border-border p-3">
-          {[975, 905, 845, 760].map((score) => (
-            <button
-              key={score}
-              type="button"
-              onClick={() => setCandidateScore(score)}
-              className="rounded-md border border-border px-2.5 py-1 text-sm"
-            >
-              Preview {score}
-            </button>
-          ))}
-        </div>
-        <Ranking.Root
-          items={players}
-          getKey={(player) => player.id}
-          boundaries={[3]}
-          labels={["Podium", "Field"]}
-        >
-          <Ranking.Slot slotKey="preview" atIndex={insertionIndex}>
-            {({ rank, groupIndex }) => (
-              <div className="mx-4 my-3 rounded-md border border-emerald-500/40 bg-emerald-500/10 px-3 py-2">
-                <Text size="2" weight="medium">
-                  Candidate preview
-                </Text>
-                <Text size="2" color="secondary">
-                  Score {candidateScore} would render at rank #{rank} in group{" "}
-                  {groupIndex + 1}.
-                </Text>
-              </div>
-            )}
-          </Ranking.Slot>
-          <RankingRows />
-        </Ranking.Root>
-      </div>
-    );
-  },
-};

package/src/stories/Receipt.stories.tsx

@@ -1,221 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Price, Receipt } from "@/components/primitives";
-
-const meta: Meta<typeof Receipt> = {
-  title: "Primitives/Receipt",
-  component: Receipt,
-  parameters: {
-    layout: "centered",
-  },
-  decorators: [
-    (Story) => (
-      <div className="flex flex-col items-center gap-4 p-8 tabular-nums">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-
-export const Basic: StoryObj<typeof Receipt> = {
-  render: () => (
-    <div className="bg-surface w-80 rounded-lg border border-border p-4">
-      <Receipt decimals={2}>
-        <Receipt.Price maxDecimals={2}>
-          <Price.Symbol>$</Price.Symbol>
-          <Price.Value />
-        </Receipt.Price>
-        <Receipt.Header>
-          <span className="text-xl font-semibold">Order Summary</span>
-        </Receipt.Header>
-        <Receipt.Item label="Item 1" value={1511n} />
-        <Receipt.Item label="Item 2" value={2000n} />
-        <Receipt.Item label="Item 3" value={500n} />
-        <Receipt.Subtotal />
-        <Receipt.Tax rate={0.1} />
-        <Receipt.Separator />
-        <Receipt.Total />
-      </Receipt>
-    </div>
-  ),
-};
-
-export const WithSubtotal: StoryObj<typeof Receipt> = {
-  render: () => (
-    <div className="bg-surface w-80 rounded-lg border border-border p-4">
-      <Receipt decimals={6}>
-        <Receipt.Price maxDecimals={2}>
-          <Price.Symbol>$</Price.Symbol>
-          <Price.Value />
-        </Receipt.Price>
-        <Receipt.Header>
-          <span className="text-xl font-semibold">Order Summary</span>
-        </Receipt.Header>
-        <Receipt.Item label="Item 1" value={1500000n} />
-        <Receipt.Item label="Item 2" value={2000000n} />
-        <Receipt.Item label="Item 3" value={500000n} />
-        <Receipt.Separator />
-        <Receipt.Subtotal />
-        <Receipt.Total />
-      </Receipt>
-    </div>
-  ),
-};
-
-export const WithDiscount: StoryObj<typeof Receipt> = {
-  render: () => (
-    <div className="bg-surface w-80 rounded-lg border border-border p-4">
-      <Receipt decimals={6}>
-        <Receipt.Price maxDecimals={2}>
-          <Price.Symbol>$</Price.Symbol>
-          <Price.Value />
-        </Receipt.Price>
-        <Receipt.Header>
-          <span className="text-xl font-semibold">Order Summary</span>
-        </Receipt.Header>
-        <Receipt.Item label="Item 1" value={1500000n} />
-        <Receipt.Item label="Item 2" value={2000000n} />
-        <Receipt.Separator />
-        <Receipt.Subtotal />
-        <Receipt.Discount label="Promo Code" value={500000n} />
-        <Receipt.Total />
-      </Receipt>
-    </div>
-  ),
-};
-
-export const WithTax: StoryObj<typeof Receipt> = {
-  render: () => (
-    <div className="bg-surface w-80 rounded-lg border border-border p-4">
-      <Receipt decimals={2}>
-        <Receipt.Price maxDecimals={2}>
-          <Price.Symbol>$</Price.Symbol>
-          <Price.Value />
-        </Receipt.Price>
-        <Receipt.Header>
-          <span className="text-xl font-semibold">Receipt</span>
-        </Receipt.Header>
-        <Receipt.Item label="Subtotal" value={4000} />
-        <Receipt.Tax rate={0.08} />
-        <Receipt.Total />
-      </Receipt>
-    </div>
-  ),
-};
-
-export const WithFee: StoryObj<typeof Receipt> = {
-  render: () => (
-    <div className="bg-surface w-80 rounded-lg border border-border p-4">
-      <Receipt decimals={6}>
-        <Receipt.Price maxDecimals={2}>
-          <Price.Symbol>$</Price.Symbol>
-          <Price.Value />
-        </Receipt.Price>
-        <Receipt.Header>
-          <span className="text-xl font-semibold">Order Summary</span>
-        </Receipt.Header>
-        <Receipt.Item label="Item 1" value={1500000n} />
-        <Receipt.Item label="Item 2" value={2000000n} />
-        <Receipt.Separator />
-        <Receipt.Subtotal />
-        <Receipt.Fee label="Shipping" value={200000n} />
-        <Receipt.Total />
-      </Receipt>
-    </div>
-  ),
-};
-
-export const FullReceipt: StoryObj<typeof Receipt> = {
-  render: () => (
-    <div className="bg-surface w-80 rounded-lg border border-border p-4">
-      <Receipt decimals={6}>
-        <Receipt.Price maxDecimals={2}>
-          <Price.Symbol>$</Price.Symbol>
-          <Price.Value />
-        </Receipt.Price>
-        <Receipt.Header className="flex items-baseline justify-between">
-          <span className="text-xl font-semibold">Order #12345</span>
-          <span className="text-xs leading-[18px] text-muted-foreground">
-            March 16, 2026
-          </span>
-        </Receipt.Header>
-        <Receipt.Item label="Product A" value={2500000n} />
-        <Receipt.Item label="Product B" value={1800000n} />
-        <Receipt.Item label="Product C" value={700000n} />
-        <Receipt.Separator />
-        <Receipt.Subtotal />
-        <Receipt.Discount label="Member Discount" value={500000n} />
-        <Receipt.Fee label="Shipping" value={200000n} />
-        <Receipt.Tax rate={0.08} />
-        <Receipt.Separator />
-        <Receipt.Total />
-        <Receipt.Footer>
-          <span className="text-center text-xs text-muted-foreground">
-            Thank you for your order!
-          </span>
-        </Receipt.Footer>
-      </Receipt>
-    </div>
-  ),
-};
-
-export const ManualTotals: StoryObj<typeof Receipt> = {
-  render: () => (
-    <div className="bg-surface w-80 rounded-lg border border-border p-4">
-      <Receipt decimals={2}>
-        <Receipt.Price maxDecimals={2}>
-          <Price.Symbol>$</Price.Symbol>
-          <Price.Value />
-        </Receipt.Price>
-        <Receipt.Header>
-          <span className="text-xl font-semibold">Invoice</span>
-        </Receipt.Header>
-        <Receipt.Item label="Consulting" value={500000} />
-        <Receipt.Item label="Development" value={750000} />
-        <Receipt.Separator />
-        <Receipt.Subtotal value={1250000} />
-        <Receipt.Total value={1500000} label="Amount Due" />
-      </Receipt>
-    </div>
-  ),
-};
-
-export const EthReceipt: StoryObj<typeof Receipt> = {
-  render: () => (
-    <div className="bg-surface w-80 rounded-lg border border-border p-4">
-      <Receipt decimals={18}>
-        <Receipt.Price maxDecimals={4}>
-          <Price.Value /> <Price.Symbol>ETH</Price.Symbol>
-        </Receipt.Price>
-        <Receipt.Header>
-          <span className="text-xl font-semibold">NFT Purchase</span>
-        </Receipt.Header>
-        <Receipt.Item label="Base Price" value={500000000000000000n} />
-        <Receipt.Item label="Royalty" value={25000000000000000n} />
-        <Receipt.Separator />
-        <Receipt.Total />
-      </Receipt>
-    </div>
-  ),
-};
-
-export const PerItemOverride: StoryObj<typeof Receipt> = {
-  render: () => (
-    <div className="bg-surface w-80 rounded-lg border border-border p-4">
-      <Receipt decimals={6}>
-        <Receipt.Price maxDecimals={2}>
-          <Price.Symbol>$</Price.Symbol>
-          <Price.Value />
-        </Receipt.Price>
-        <Receipt.Header>
-          <span className="text-xl font-semibold">Mixed Override</span>
-        </Receipt.Header>
-        <Receipt.Item label="Normal item" value={1500000n} />
-        <Receipt.Item label="High precision" value={1234567n} maxDecimals={6} />
-        <Receipt.Separator />
-        <Receipt.Total />
-      </Receipt>
-    </div>
-  ),
-};