@dreamboard-games/ui-sdk 0.0.41

package/src/components/__fixtures__/ActionPanel.fixture.tsx

@@ -0,0 +1,298 @@
+/**
+ * ActionPanel and ActionGroup component fixtures
+ * Demonstrates composable action UI patterns
+ */
+import React from "react";
+import {
+  Building,
+  Route,
+  Coins,
+  TreePine,
+  Gem,
+  Sword,
+  Shield,
+  Flag,
+} from "lucide-react";
+import { ActionPanel, ActionGroup } from "../ActionPanel.js";
+import { ActionButton } from "../ActionButton.js";
+import type { ResourceDefinition } from "../CostDisplay.js";
+
+function Container({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-800 to-slate-900 p-8">
+      <div className="max-w-md mx-auto space-y-6">{children}</div>
+    </div>
+  );
+}
+
+const resourceDefs: ResourceDefinition[] = [
+  { type: "gold", label: "Gold", icon: Coins, color: "text-yellow-400" },
+  { type: "wood", label: "Wood", icon: TreePine, color: "text-amber-600" },
+  { type: "gems", label: "Gems", icon: Gem, color: "text-purple-400" },
+];
+
+const playerResources = { gold: 5, wood: 3, gems: 1 };
+
+export default {
+  default: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Default Panel</h2>
+      <ActionPanel title="Your Actions">
+        <ActionGroup title="Build">
+          <ActionButton
+            label="Build Road"
+            icon={Route}
+            onClick={() => console.log("Build road")}
+          />
+          <ActionButton
+            label="Build Settlement"
+            icon={Building}
+            onClick={() => console.log("Build settlement")}
+          />
+        </ActionGroup>
+      </ActionPanel>
+    </Container>
+  ),
+
+  withStateDisplay: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">With Phase Display</h2>
+      <ActionPanel
+        title="Your Turn"
+        state="playerActions"
+        stateLabels={{
+          playerActions: "Take Your Actions",
+          rollDice: "Roll Dice",
+          endTurn: "End Turn",
+        }}
+      >
+        <ActionGroup title="Build">
+          <ActionButton
+            label="Build Road"
+            icon={Route}
+            cost={{ gold: 1, wood: 1 }}
+            currentResources={playerResources}
+            resourceDefs={resourceDefs}
+            onClick={() => {}}
+          />
+          <ActionButton
+            label="Build Settlement"
+            icon={Building}
+            cost={{ gold: 2, wood: 2 }}
+            currentResources={playerResources}
+            resourceDefs={resourceDefs}
+            onClick={() => {}}
+          />
+        </ActionGroup>
+      </ActionPanel>
+    </Container>
+  ),
+
+  multipleGroups: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Multiple Groups</h2>
+      <ActionPanel title="Game Actions" state="combatPhase">
+        <ActionGroup title="Attack" variant="danger">
+          <ActionButton
+            label="Melee Attack"
+            icon={Sword}
+            variant="danger"
+            onClick={() => {}}
+          />
+          <ActionButton
+            label="Ranged Attack"
+            icon={Sword}
+            variant="danger"
+            onClick={() => {}}
+          />
+        </ActionGroup>
+        <ActionGroup title="Defend" variant="success">
+          <ActionButton
+            label="Block"
+            icon={Shield}
+            variant="secondary"
+            onClick={() => {}}
+          />
+          <ActionButton
+            label="Dodge"
+            icon={Shield}
+            variant="secondary"
+            onClick={() => {}}
+          />
+        </ActionGroup>
+        <ActionGroup title="End Turn">
+          <ActionButton
+            label="End Turn"
+            icon={Flag}
+            variant="success"
+            onClick={() => {}}
+          />
+        </ActionGroup>
+      </ActionPanel>
+    </Container>
+  ),
+
+  groupVariants: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Group Variants</h2>
+      <ActionPanel title="Actions" collapsible={false}>
+        <ActionGroup title="Default Group" variant="default">
+          <ActionButton label="Default Action" onClick={() => {}} />
+        </ActionGroup>
+        <ActionGroup
+          title="Warning Group"
+          variant="warning"
+          description="Caution required"
+        >
+          <ActionButton
+            label="Warning Action"
+            variant="secondary"
+            onClick={() => {}}
+          />
+        </ActionGroup>
+        <ActionGroup
+          title="Danger Group"
+          variant="danger"
+          description="This cannot be undone"
+        >
+          <ActionButton
+            label="Danger Action"
+            variant="danger"
+            onClick={() => {}}
+          />
+        </ActionGroup>
+        <ActionGroup
+          title="Success Group"
+          variant="success"
+          description="Good choice!"
+        >
+          <ActionButton
+            label="Success Action"
+            variant="success"
+            onClick={() => {}}
+          />
+        </ActionGroup>
+      </ActionPanel>
+    </Container>
+  ),
+
+  conditionalVisibility: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        Conditional Visibility
+      </h2>
+      <p className="text-slate-400 text-sm mb-4">
+        Some groups are hidden based on game state
+      </p>
+      <ActionPanel title="Actions" state="buildPhase">
+        <ActionGroup title="Build Actions" visible={true}>
+          <ActionButton label="Build Road" icon={Route} onClick={() => {}} />
+          <ActionButton
+            label="Build Settlement"
+            icon={Building}
+            onClick={() => {}}
+          />
+        </ActionGroup>
+        <ActionGroup title="Combat Actions" visible={false}>
+          <ActionButton label="Attack" icon={Sword} onClick={() => {}} />
+        </ActionGroup>
+        <ActionGroup title="Trade Actions" visible={true}>
+          <ActionButton
+            label="Trade with Bank"
+            icon={Coins}
+            onClick={() => {}}
+          />
+        </ActionGroup>
+      </ActionPanel>
+    </Container>
+  ),
+
+  collapsedByDefault: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        Collapsed by Default
+      </h2>
+      <ActionPanel title="Click to Expand" defaultExpanded={false}>
+        <ActionGroup title="Hidden Actions">
+          <ActionButton label="Secret Action 1" onClick={() => {}} />
+          <ActionButton label="Secret Action 2" onClick={() => {}} />
+        </ActionGroup>
+      </ActionPanel>
+    </Container>
+  ),
+
+  nonCollapsible: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Non-Collapsible</h2>
+      <ActionPanel title="Always Visible" collapsible={false}>
+        <ActionGroup title="Required Actions">
+          <ActionButton
+            label="Must Do This"
+            variant="primary"
+            onClick={() => {}}
+          />
+        </ActionGroup>
+      </ActionPanel>
+    </Container>
+  ),
+
+  fullGameExample: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Full Game Example</h2>
+      <p className="text-slate-400 text-sm mb-4">
+        Player has: 5 gold, 3 wood, 1 gem
+      </p>
+      <ActionPanel
+        title="Your Turn"
+        state="playerActions"
+        stateLabels={{ playerActions: "Take Actions" }}
+      >
+        <ActionGroup title="Build" description="Construct buildings and roads">
+          <ActionButton
+            label="Build Road"
+            description="Connect settlements"
+            icon={Route}
+            cost={{ gold: 1, wood: 1 }}
+            currentResources={playerResources}
+            resourceDefs={resourceDefs}
+            onClick={() => {}}
+          />
+          <ActionButton
+            label="Build Settlement"
+            description="New territory"
+            icon={Building}
+            cost={{ gold: 2, wood: 2 }}
+            currentResources={playerResources}
+            resourceDefs={resourceDefs}
+            onClick={() => {}}
+          />
+          <ActionButton
+            label="Build City"
+            description="Upgrade settlement"
+            icon={Building}
+            cost={{ gold: 3, gems: 3 }}
+            currentResources={playerResources}
+            resourceDefs={resourceDefs}
+            onClick={() => {}}
+          />
+        </ActionGroup>
+        <ActionGroup title="Trade">
+          <ActionButton
+            label="Trade with Bank"
+            description="4:1 exchange rate"
+            icon={Coins}
+            onClick={() => {}}
+          />
+        </ActionGroup>
+        <ActionGroup title="End Turn">
+          <ActionButton
+            label="End Turn"
+            icon={Flag}
+            variant="success"
+            onClick={() => {}}
+          />
+        </ActionGroup>
+      </ActionPanel>
+    </Container>
+  ),
+};

package/src/components/__fixtures__/Card.fixture.tsx

@@ -0,0 +1,185 @@
+/**
+ * Card component fixtures
+ * Demonstrates various card states and interactions
+ */
+import React, { useState } from "react";
+import { Card, type ViewCard } from "../Card.js";
+
+function Container({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-green-800 to-green-900 p-8 flex items-center justify-center">
+      {children}
+    </div>
+  );
+}
+
+// Sample card data for fixtures
+const SAMPLE_CARDS: ViewCard[] = [
+  {
+    id: "card-spade-A",
+    cardType: "standard",
+    name: "Ace of Spades",
+    text: "The highest card",
+    properties: { suit: "♠", rank: "A", value: 14 },
+  },
+  {
+    id: "card-heart-K",
+    cardType: "standard",
+    name: "King of Hearts",
+    text: "A royal card",
+    properties: { suit: "♥", rank: "K", value: 13 },
+  },
+  {
+    id: "card-diamond-Q",
+    cardType: "standard",
+    name: "Queen of Diamonds",
+    text: "A royal card",
+    properties: { suit: "♦", rank: "Q", value: 12 },
+  },
+  {
+    id: "card-club-J",
+    cardType: "standard",
+    name: "Jack of Clubs",
+    text: "A royal card",
+    properties: { suit: "♣", rank: "J", value: 11 },
+  },
+];
+
+// Custom card renderer showing suit and rank
+function PlayingCardRenderer({ card }: { card: ViewCard }) {
+  const props = card.properties as { suit: string; rank: string };
+  const isRed = props.suit === "♥" || props.suit === "♦";
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full p-2">
+      <span
+        className={`text-2xl font-bold ${isRed ? "text-red-500" : "text-slate-800"}`}
+      >
+        {props.rank}
+      </span>
+      <span className={`text-3xl ${isRed ? "text-red-500" : "text-slate-800"}`}>
+        {props.suit}
+      </span>
+    </div>
+  );
+}
+
+// Interactive demo with selection
+function InteractiveDemo() {
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  return (
+    <Container>
+      <div className="space-y-8">
+        <h2 className="text-xl font-bold text-white text-center">
+          Click to Select
+        </h2>
+        <div className="flex gap-4 flex-wrap justify-center">
+          {SAMPLE_CARDS.map((card) => (
+            <Card
+              key={card.id}
+              card={card}
+              selected={selectedId === card.id}
+              onCardClick={(id) => setSelectedId(selectedId === id ? null : id)}
+              renderContent={(c) => <PlayingCardRenderer card={c} />}
+            />
+          ))}
+        </div>
+        <p className="text-white/70 text-center">
+          Selected: {selectedId || "None"}
+        </p>
+      </div>
+    </Container>
+  );
+}
+
+export default {
+  default: (
+    <Container>
+      <Card card={SAMPLE_CARDS[0]} />
+    </Container>
+  ),
+
+  withCustomRenderer: (
+    <Container>
+      <Card
+        card={SAMPLE_CARDS[0]}
+        renderContent={(card) => <PlayingCardRenderer card={card} />}
+      />
+    </Container>
+  ),
+
+  selected: (
+    <Container>
+      <Card
+        card={SAMPLE_CARDS[1]}
+        selected={true}
+        renderContent={(card) => <PlayingCardRenderer card={card} />}
+      />
+    </Container>
+  ),
+
+  disabled: (
+    <Container>
+      <Card
+        card={SAMPLE_CARDS[2]}
+        disabled={true}
+        renderContent={(card) => <PlayingCardRenderer card={card} />}
+      />
+    </Container>
+  ),
+
+  faceDown: (
+    <Container>
+      <Card card={SAMPLE_CARDS[0]} faceDown={true} />
+    </Container>
+  ),
+
+  sizes: (
+    <Container>
+      <div className="flex items-end gap-6">
+        <div className="text-center">
+          <Card
+            card={SAMPLE_CARDS[0]}
+            size="sm"
+            renderContent={(card) => <PlayingCardRenderer card={card} />}
+          />
+          <p className="text-white/70 mt-2 text-sm">Small</p>
+        </div>
+        <div className="text-center">
+          <Card
+            card={SAMPLE_CARDS[1]}
+            size="md"
+            renderContent={(card) => <PlayingCardRenderer card={card} />}
+          />
+          <p className="text-white/70 mt-2 text-sm">Medium</p>
+        </div>
+        <div className="text-center">
+          <Card
+            card={SAMPLE_CARDS[2]}
+            size="lg"
+            renderContent={(card) => <PlayingCardRenderer card={card} />}
+          />
+          <p className="text-white/70 mt-2 text-sm">Large</p>
+        </div>
+      </div>
+    </Container>
+  ),
+
+  interactive: <InteractiveDemo />,
+
+  allCards: (
+    <Container>
+      <div className="grid grid-cols-4 gap-4">
+        {SAMPLE_CARDS.map((card) => (
+          <Card
+            key={card.id}
+            card={card}
+            renderContent={(c) => <PlayingCardRenderer card={c} />}
+            onCardClick={(id) => console.log("Clicked:", id)}
+          />
+        ))}
+      </div>
+    </Container>
+  ),
+};

package/src/components/__fixtures__/CostDisplay.fixture.tsx

@@ -0,0 +1,156 @@
+/**
+ * CostDisplay component fixtures
+ * Demonstrates cost display with affordability indication
+ */
+import React from "react";
+import { Coins, TreePine, Gem, Mountain, Zap, Droplet } from "lucide-react";
+import { CostDisplay, type ResourceDefinition } from "../CostDisplay.js";
+
+function Container({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-800 to-slate-900 p-8">
+      <div className="max-w-md mx-auto space-y-6">{children}</div>
+    </div>
+  );
+}
+
+const fantasyDefs: ResourceDefinition[] = [
+  { type: "gold", label: "Gold", icon: Coins, color: "text-yellow-400" },
+  { type: "wood", label: "Wood", icon: TreePine, color: "text-amber-600" },
+  { type: "gems", label: "Gems", icon: Gem, color: "text-purple-400" },
+];
+
+const scifiDefs: ResourceDefinition[] = [
+  {
+    type: "minerals",
+    label: "Minerals",
+    icon: Mountain,
+    color: "text-amber-600",
+  },
+  { type: "energy", label: "Energy", icon: Zap, color: "text-blue-400" },
+  { type: "water", label: "Water", icon: Droplet, color: "text-cyan-400" },
+];
+
+export default {
+  default: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        Default (No Affordability Check)
+      </h2>
+      <div className="bg-slate-800 p-4 rounded-lg">
+        <CostDisplay cost={{ gold: 3, wood: 2 }} resourceDefs={fantasyDefs} />
+      </div>
+    </Container>
+  ),
+
+  canAfford: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        Can Afford (All Green)
+      </h2>
+      <p className="text-slate-400 text-sm mb-4">Player has: 5 gold, 3 wood</p>
+      <div className="bg-slate-800 p-4 rounded-lg">
+        <CostDisplay
+          cost={{ gold: 3, wood: 2 }}
+          currentResources={{ gold: 5, wood: 3 }}
+          resourceDefs={fantasyDefs}
+        />
+      </div>
+    </Container>
+  ),
+
+  cannotAfford: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        Cannot Afford (Mixed)
+      </h2>
+      <p className="text-slate-400 text-sm mb-4">Player has: 5 gold, 1 wood</p>
+      <div className="bg-slate-800 p-4 rounded-lg">
+        <CostDisplay
+          cost={{ gold: 3, wood: 2 }}
+          currentResources={{ gold: 5, wood: 1 }}
+          resourceDefs={fantasyDefs}
+        />
+      </div>
+    </Container>
+  ),
+
+  completelyUnaffordable: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">
+        Completely Unaffordable (All Red)
+      </h2>
+      <p className="text-slate-400 text-sm mb-4">Player has: 1 gold, 0 wood</p>
+      <div className="bg-slate-800 p-4 rounded-lg">
+        <CostDisplay
+          cost={{ gold: 3, wood: 2 }}
+          currentResources={{ gold: 1, wood: 0 }}
+          resourceDefs={fantasyDefs}
+        />
+      </div>
+    </Container>
+  ),
+
+  stackedLayout: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Stacked Layout</h2>
+      <div className="bg-slate-800 p-4 rounded-lg">
+        <CostDisplay
+          cost={{ minerals: 2, energy: 1, water: 3 }}
+          currentResources={{ minerals: 3, energy: 0, water: 5 }}
+          resourceDefs={scifiDefs}
+          layout="stacked"
+        />
+      </div>
+    </Container>
+  ),
+
+  sizes: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">Size Variants</h2>
+      <div className="space-y-4">
+        <div className="bg-slate-800 p-4 rounded-lg">
+          <p className="text-slate-400 text-xs mb-2">Small</p>
+          <CostDisplay
+            cost={{ gold: 3, wood: 2, gems: 1 }}
+            resourceDefs={fantasyDefs}
+            size="sm"
+          />
+        </div>
+        <div className="bg-slate-800 p-4 rounded-lg">
+          <p className="text-slate-400 text-xs mb-2">Medium</p>
+          <CostDisplay
+            cost={{ gold: 3, wood: 2, gems: 1 }}
+            resourceDefs={fantasyDefs}
+            size="md"
+          />
+        </div>
+      </div>
+    </Container>
+  ),
+
+  inContext: (
+    <Container>
+      <h2 className="text-xl font-bold text-white mb-4">In Button Context</h2>
+      <div className="space-y-2">
+        {/* Simulated action button with cost */}
+        <div className="bg-blue-600 p-3 rounded-lg flex items-center justify-between">
+          <span className="font-semibold text-white">Build Settlement</span>
+          <CostDisplay
+            cost={{ gold: 2, wood: 2 }}
+            currentResources={{ gold: 5, wood: 5 }}
+            resourceDefs={fantasyDefs}
+          />
+        </div>
+        <div className="bg-slate-700 p-3 rounded-lg flex items-center justify-between opacity-60">
+          <span className="font-semibold text-white">Build Castle</span>
+          <CostDisplay
+            cost={{ gold: 10, gems: 5 }}
+            currentResources={{ gold: 3, gems: 1 }}
+            resourceDefs={fantasyDefs}
+          />
+        </div>
+      </div>
+    </Container>
+  ),
+};