tournament-brackets-ui 0.1.0

package/src/seeding.js

@@ -0,0 +1,488 @@
+// ---- 1) Static config ----
+export const BRACKET_BYES = {
+  8: 0,
+  9: 1,
+  10: 6,
+  11: 5,
+  12: 4,
+  13: 3,
+  14: 2,
+  16: 0,
+};
+
+const ALLOWED_SIZES = [8, 9, 10, 11, 12, 13, 14, 16];
+const MIN = ALLOWED_SIZES[0];
+const MAX = ALLOWED_SIZES[ALLOWED_SIZES.length - 1];
+
+// ---- 2) Pick bracket sizes (same logic) ----
+export function pickBracketSizes(N) {
+  let count = 1;
+  while (count * MAX < N) count <<= 1;
+
+  if (N <= MIN * count) {
+    return Array(count).fill(MIN);
+  }
+
+  const base = Math.floor(N / count);
+  const sizes = Array(count).fill(Math.max(MIN, Math.min(MAX, base)));
+  let extra = N - sizes.reduce((sum, s) => sum + s, 0);
+
+  // round-robin distribute the extra slots
+  for (let i = 0; extra > 0; i = (i + 1) % count) {
+    if (sizes[i] < MAX) {
+      sizes[i]++;
+      extra--;
+    }
+  }
+  return sizes;
+}
+
+// ---- 3) Utilities ----
+function byeCountForSize(size) {
+  return BRACKET_BYES[size] ?? 0;
+}
+
+function neighborsOf(i, total) {
+  const left = (i - 1 + total) % total;
+  const right = (i + 1) % total;
+  return [left, right];
+}
+
+function countByClub(players) {
+  const m = new Map();
+  for (const p of players) {
+    m.set(p.club, (m.get(p.club) || 0) + 1);
+  }
+  return m;
+}
+
+function sumByesForSizes(sizes) {
+  return sizes.reduce((acc, sz) => acc + byeCountForSize(sz), 0);
+}
+
+// Largest remainder apportionment for bye quotas: proportional fairness
+function computeByeQuotaByClub(players, sizes) {
+  const totalByes = sumByesForSizes(sizes);
+  const totals = countByClub(players);
+  const N = players.length;
+
+  const entries = [...totals.entries()].map(([club, cnt]) => {
+    const exact = (totalByes * cnt) / N;
+    const floor = Math.floor(exact);
+    const remainder = exact - floor;
+    return { club, floor, remainder };
+  });
+
+  let allocated = entries.reduce((s, e) => s + e.floor, 0);
+  const remaining = totalByes - allocated;
+
+  entries.sort((a, b) => b.remainder - a.remainder); // biggest remainder first
+  for (let i = 0; i < remaining; i++) entries[i].floor += 1;
+
+  const quota = new Map();
+  for (const e of entries) quota.set(e.club, e.floor);
+  return quota; // Map<club, targetByesForTournament>
+}
+
+// ---- 5) Strong-player aware + club-balanced group distribution ----
+//  - Place strong first (avoid neighbor same-club strong).
+//  - Then place others, preferring the group that has the FEWEST of that club so far.
+function distributeIntoGroups(players, sizes) {
+  const bracketCount = sizes.length;
+
+  const brackets = sizes.map((sz, i) => ({
+    group: i + 1,
+    size: sz,
+    players: [],
+  }));
+  const capacityLeft = sizes.map((s) => s);
+
+  const strong = players.filter((p) => p.bias);
+  const others = players.filter((p) => !p.bias);
+
+  // Track strong clubs per group for neighbor rule
+  const strongInGroupClub = Array.from({ length: bracketCount }, () => new Set());
+
+  // Track club counts per group for balancing
+  const clubCountInGroup = Array.from({ length: bracketCount }, () => new Map());
+
+  const incClub = (g, club) => {
+    const m = clubCountInGroup[g];
+    m.set(club, (m.get(club) || 0) + 1);
+  };
+
+  // Place strong first with scoring: capacity, no neighbor same-club strong, fewer club counts
+  for (const p of strong) {
+    let best = -1;
+    let bestScore = -Infinity;
+
+    for (let g = 0; g < bracketCount; g++) {
+      if (capacityLeft[g] <= 0) continue;
+
+      const neigh = neighborsOf(g, bracketCount);
+      const neighborConflict = neigh.some((ng) => strongInGroupClub[ng].has(p.club)) ? 1 : 0;
+      const sameGroupConflict = strongInGroupClub[g].has(p.club) ? 1 : 0;
+      const clubLoad = (clubCountInGroup[g].get(p.club) || 0);
+
+      // Heuristic score:
+      //   +100 * capacity
+      //   -20  if neighbor has same-club strong
+      //   -10  if same group already has same-club strong
+      //   -3   per existing members of this club in the group
+      const score =
+        capacityLeft[g] * 100 - neighborConflict * 20 - sameGroupConflict * 10 - clubLoad * 3;
+
+      if (score > bestScore) {
+        bestScore = score;
+        best = g;
+      }
+    }
+
+    if (best !== -1) {
+      brackets[best].players.push(p);
+      capacityLeft[best]--;
+      strongInGroupClub[best].add(p.club);
+      incClub(best, p.club);
+    }
+  }
+
+  // Place others: choose group with lowest club load, tie-break by capacity
+  for (const p of others) {
+    let best = -1;
+    let bestScore = -Infinity;
+
+    for (let g = 0; g < bracketCount; g++) {
+      if (capacityLeft[g] <= 0) continue;
+      const clubLoad = (clubCountInGroup[g].get(p.club) || 0);
+      const score = -clubLoad * 100 + capacityLeft[g]; // prefer groups with fewer of this club
+      if (score > bestScore) {
+        bestScore = score;
+        best = g;
+      }
+    }
+
+    if (best !== -1) {
+      brackets[best].players.push(p);
+      capacityLeft[best]--;
+      incClub(best, p.club);
+    }
+  }
+
+  return brackets;
+}
+
+// ---- 6) In-bracket ordering with fair byes + constraints (no nulls) ----
+function orderBracket(players, size, byeAssignedPerClub, byeQuotaByClub) {
+  const byeCount = byeCountForSize(size);
+  const byeStart = size - byeCount; // indexes [byeStart .. size-1] are bye positions
+
+  const strong = players.filter((p) => p.bias);
+  const nonStrong = players.filter((p) => !p.bias);
+
+  // Helper: can this club still receive a bye (global fairness)?
+  const canClubTakeMoreByes = (club) => {
+    const used = byeAssignedPerClub.get(club) || 0;
+    const quota = byeQuotaByClub.get(club) || 0;
+    return used < quota;
+  };
+
+  // Sort candidates by "need" = (assigned/quota) ascending, then by frequency (optional)
+  const needScore = (club) => {
+    const used = byeAssignedPerClub.get(club) || 0;
+    const quota = byeQuotaByClub.get(club) || 0;
+    // If quota is zero, treat as high needScore so it's picked only if forced later
+    return quota > 0 ? used / quota : 1e9;
+  };
+
+  // We'll avoid giving multiple byes in the SAME bracket to the SAME club if alternatives exist
+  const bracketByeClubs = new Set();
+
+  // Pick K players for bye slots using fairness:
+  const byePicks = [];
+
+  // 6a) Prefer strong players that can still take byes (respect quotas)
+  const strongEligible = strong
+    .filter((p) => canClubTakeMoreByes(p.club))
+    .sort((a, b) => needScore(a.club) - needScore(b.club));
+
+  for (const s of strongEligible) {
+    if (byePicks.length >= byeCount) break;
+    // avoid duplicate club in this bracket bye region if possible
+    if (!bracketByeClubs.has(s.club)) {
+      byePicks.push(s);
+      bracketByeClubs.add(s.club);
+      byeAssignedPerClub.set(s.club, (byeAssignedPerClub.get(s.club) || 0) + 1);
+    }
+  }
+
+  // 6b) If not enough, allow remaining strong regardless of quota (but still try to avoid duplicates)
+  if (byePicks.length < byeCount) {
+    const strongFallback = strong
+      .filter((p) => !byePicks.includes(p))
+      .sort((a, b) => needScore(a.club) - needScore(b.club));
+    for (const s of strongFallback) {
+      if (byePicks.length >= byeCount) break;
+      if (!bracketByeClubs.has(s.club)) {
+        byePicks.push(s);
+        bracketByeClubs.add(s.club);
+        // Only increment assigned if they were actually under quota
+        if (canClubTakeMoreByes(s.club)) {
+          byeAssignedPerClub.set(s.club, (byeAssignedPerClub.get(s.club) || 0) + 1);
+        }
+      }
+    }
+  }
+
+  // 6c) Still not enough? Fill with non-strong fairly
+  if (byePicks.length < byeCount) {
+    const nonStrongEligible = nonStrong
+      .filter((p) => canClubTakeMoreByes(p.club))
+      .sort((a, b) => needScore(a.club) - needScore(b.club));
+    for (const p of nonStrongEligible) {
+      if (byePicks.length >= byeCount) break;
+      if (!bracketByeClubs.has(p.club)) {
+        byePicks.push(p);
+        bracketByeClubs.add(p.club);
+        byeAssignedPerClub.set(p.club, (byeAssignedPerClub.get(p.club) || 0) + 1);
+      }
+    }
+  }
+
+  // 6d) If STILL short (tight quotas), take anyone left (minimize duplicates if possible)
+  if (byePicks.length < byeCount) {
+    const rest = players.filter((p) => !byePicks.includes(p));
+    // prefer clubs not yet present in this bye region
+    rest.sort((a, b) => {
+      const aDup = bracketByeClubs.has(a.club) ? 1 : 0;
+      const bDup = bracketByeClubs.has(b.club) ? 1 : 0;
+      if (aDup !== bDup) return aDup - bDup;
+      return needScore(a.club) - needScore(b.club);
+    });
+    for (const p of rest) {
+      if (byePicks.length >= byeCount) break;
+      byePicks.push(p);
+      bracketByeClubs.add(p.club);
+      if (canClubTakeMoreByes(p.club)) {
+        byeAssignedPerClub.set(p.club, (byeAssignedPerClub.get(p.club) || 0) + 1);
+      }
+    }
+  }
+
+  // Build slots: players only, no nulls; put bye picks into tail indexes
+  const slots = Array(size);
+  const byeSet = new Set(byePicks);
+  let tail = byeStart;
+  for (const p of byePicks) {
+    slots[tail++] = p;
+  }
+
+  // Remaining players
+  const remaining = players.filter((p) => !byeSet.has(p));
+
+  // Place remaining strong spaced in non-bye region
+  const nonByeLen = size - byeCount;
+  const spreadOrder = (() => {
+    const mid = Math.floor(nonByeLen / 2);
+    const order = [];
+    let l = 0, r = mid;
+    while (order.length < nonByeLen) {
+      if (l < mid) order.push(l++);
+      if (r < nonByeLen) order.push(r++);
+    }
+    return order;
+  })();
+
+  // First, place remaining strong on spread positions
+  const remainingStrong = remaining.filter((p) => p.bias);
+  let so = 0;
+  for (const s of remainingStrong) {
+    while (so < spreadOrder.length && slots[spreadOrder[so]]) so++;
+    if (so >= spreadOrder.length) break;
+    slots[spreadOrder[so]] = s;
+    so++;
+  }
+
+  // Then fill rest with non-strong avoiding first-round same-club if possible
+  const pool = remaining.filter((p) => !p.bias);
+
+  function pickNotClub(club) {
+    if (!club) return pool.shift() || null;
+    const idx = pool.findIndex((p) => p.club !== club);
+    if (idx === -1) return pool.shift() || null;
+    return pool.splice(idx, 1)[0] || null;
+    }
+
+  for (let i = 0; i < nonByeLen; i += 2) {
+    const a = i, b = i + 1;
+    const clubA = slots[a]?.club ?? null;
+    const clubB = slots[b]?.club ?? null;
+
+    const fill = (idx, avoidClub) => {
+      if (slots[idx]) return;
+      const pick = pickNotClub(avoidClub);
+      if (pick) slots[idx] = pick;
+    };
+
+    if (clubA && !clubB) {
+      fill(b, clubA);
+    } else if (!clubA && clubB) {
+      fill(a, clubB);
+    } else if (!clubA && !clubB) {
+      const first = pickNotClub(null);
+      if (first) slots[a] = first;
+      const second = pickNotClub(first ? first.club : null);
+      if (second) slots[b] = second;
+    }
+  }
+
+  // Any leftover holes in non-bye region (rare): fill sequentially
+  for (let i = 0; i < nonByeLen && pool.length > 0; i++) {
+    if (!slots[i]) slots[i] = pool.shift();
+  }
+
+  // Sanity: fill any remaining empties (shouldn’t happen)
+  const leftovers = remaining.filter((p) => !slots.includes(p) && !byeSet.has(p));
+  for (let i = 0; i < size && leftovers.length > 0; i++) {
+    if (!slots[i]) slots[i] = leftovers.shift();
+  }
+
+  return slots;
+}
+
+// ---- 7) Main entry ----
+export function assignBrackets(players) {
+  const sizes = pickBracketSizes(players.length);
+
+  // (A) Fair bye quota per club across the whole tournament
+  const byeQuotaByClub = computeByeQuotaByClub(players, sizes); // Map<club, quota>
+  const byeAssignedPerClub = new Map(); // Map<club, used>
+
+  // (B) Place players into groups with strong + club balancing
+  const grouped = distributeIntoGroups(players, sizes);
+
+  // (C) Order inside each bracket; assign byes fairly; no nulls
+  for (const br of grouped) {
+    br.players = orderBracket(br.players, br.size, byeAssignedPerClub, byeQuotaByClub);
+  }
+
+  return grouped;
+}
+
+/*
+Bye quotas (global fairness): We compute how many byes each club should get overall, proportional to that club’s population, and then we respect that quota when assigning byes in each bracket. This prevents one big club from hogging all byes.
+
+No duplicate club byes in the same bracket (if alternatives exist): inside a bracket’s bye region we avoid giving multiple byes to the same club to keep it fair round-by-round.
+
+Club-balanced grouping: when placing players into groups, we always pick the group that currently has the fewest of that player’s club (subject to capacity), which evens out club distribution across all groups.
+*/
+
+
+const divisionAPlayers = [
+{ id: "P001", name: "Amina Yusuf", club: "TKC", bias: false },
+{ id: "P002", name: "Hiroki Tanaka", club: "TKC", bias: false },
+{ id: "P003", name: "Lucas Oliveira", club: "TKC", bias: true },
+{ id: "P004", name: "Priya Singh", club: "TKC", bias: false },
+{ id: "P005", name: "Li Wei", club: "TKC", bias: false },
+{ id: "P006", name: "Jamal Thompson", club: "TKC", bias: false },
+{ id: "P007", name: "Sofia García", club: "TKC", bias: true },
+{ id: "P008", name: "Viktor Johansson", club: "TKC", bias: false },
+{ id: "P009", name: "Zuri Ndlovu", club: "TKC", bias: false },
+{ id: "P010", name: "Amara Diop", club: "TKC", bias: false },
+{ id: "P011", name: "Kenji Watanabe", club: "TKC", bias: false },
+{ id: "P012", name: "María Estévez", club: "TKC", bias: false },
+{ id: "P013", name: "Oskar Lindgren", club: "TKC", bias: false },
+{ id: "P014", name: "Aisha El-Sayed", club: "TKC", bias: false },
+{ id: "P015", name: "Linh Tran", club: "TKC", bias: false },
+{ id: "P016", name: "Diego Castillo", club: "ETO", bias: false },
+{ id: "P017", name: "Fatima Al-Hassan", club: "ETO", bias: false },
+{ id: "P018", name: "Olivia Montgomery", club: "ETO", bias: false },
+{ id: "P019", name: "Thiago Oliveira", club: "ETO", bias: false },
+{ id: "P020", name: "Zara Novak", club: "ETO", bias: false },
+{ id: "P021", name: "Amina Yusuf", club: "ETO", bias: false },
+{ id: "P022", name: "Hiroki Tanaka", club: "ETO", bias: true },
+{ id: "P023", name: "Lucas Oliveira", club: "ETO", bias: false },
+{ id: "P024", name: "Priya Singh", club: "ETO", bias: false },
+{ id: "P025", name: "Li Wei", club: "ETO", bias: false },
+{ id: "P026", name: "Jamal Thompson", club: "ETO", bias: false },
+{ id: "P027", name: "Sofia García", club: "ETO", bias: false },
+{ id: "P028", name: "Viktor Johansson", club: "UOT", bias: false },
+{ id: "P029", name: "Zuri Ndlovu", club: "UOT", bias: true },
+{ id: "P030", name: "Amara Diop", club: "UOT", bias: false },
+{ id: "P031", name: "Kenji Watanabe", club: "UOT", bias: false },
+{ id: "P032", name: "María Estévez", club: "UOT", bias: false },
+{ id: "P033", name: "Oskar Lindgren", club: "UOT", bias: true },
+{ id: "P034", name: "Aisha El-Sayed", club: "UOT", bias: false },
+{ id: "P035", name: "Linh Tran", club: "UOT", bias: false },
+{ id: "P036", name: "Diego Castillo", club: "UOT", bias: false },
+{ id: "P037", name: "Fatima Al-Hassan", club: "UOT", bias: false },
+{ id: "P038", name: "Olivia Montgomery", club: "UOT", bias: false },
+{ id: "P039", name: "Thiago Oliveira", club: "JCC", bias: false },
+{ id: "P040", name: "Zara Novak", club: "JCC", bias: false },
+{ id: "P041", name: "Amina Yusuf", club: "JCC", bias: false },
+{ id: "P042", name: "Hiroki Tanaka", club: "JCC", bias: false },
+{ id: "P043", name: "Lucas Oliveira", club: "JCC", bias: false },
+{ id: "P044", name: "Priya Singh", club: "JCC", bias: true },
+{ id: "P045", name: "Li Wei", club: "JCC", bias: false },
+{ id: "P046", name: "Jamal Thompson", club: "JCC", bias: false },
+{ id: "P047", name: "Sofia García", club: "JCC", bias: false },
+{ id: "P048", name: "Viktor Johansson", club: "JCC", bias: false },
+{ id: "P049", name: "Zuri Ndlovu", club: "UWA", bias: false },
+{ id: "P050", name: "Amara Diop", club: "UWA", bias: false },
+{ id: "P051", name: "Kenji Watanabe", club: "UWA", bias: false },
+{ id: "P052", name: "María Estévez", club: "UWA", bias: false },
+{ id: "P053", name: "Oskar Lindgren", club: "UWA", bias: false },
+{ id: "P054", name: "Aisha El-Sayed", club: "UWA", bias: false },
+{ id: "P055", name: "Linh Tran", club: "UWA", bias: false },
+{ id: "P056", name: "Diego Castillo", club: "UWA", bias: false },
+{ id: "P057", name: "Fatima Al-Hassan", club: "UWA", bias: false },
+{ id: "P058", name: "Olivia Montgomery", club: "UWA", bias: false },
+{ id: "P059", name: "Thiago Oliveira", club: "TMU", bias: false },
+{ id: "P060", name: "Zara Novak", club: "TMU", bias: false },
+{ id: "P061", name: "Amina Yusuf", club: "TMU", bias: false },
+{ id: "P062", name: "Hiroki Tanaka", club: "TMU", bias: false },
+{ id: "P063", name: "Lucas Oliveira", club: "TMU", bias: false },
+{ id: "P064", name: "Priya Singh", club: "TMU", bias: false },
+{ id: "P065", name: "Li Wei", club: "TMU", bias: false },
+{ id: "P066", name: "Jamal Thompson", club: "TMU", bias: false },
+{ id: "P067", name: "Sofia García", club: "TMU", bias: false },
+{ id: "P068", name: "Viktor Johansson", club: "MAR", bias: false },
+{ id: "P069", name: "Zuri Ndlovu", club: "MAR", bias: false },
+{ id: "P070", name: "Amara Diop", club: "MAR", bias: false },
+{ id: "P071", name: "Kenji Watanabe", club: "MAR", bias: false },
+{ id: "P072", name: "María Estévez", club: "MAR", bias: true },
+{ id: "P073", name: "Oskar Lindgren", club: "MAR", bias: false },
+{ id: "P074", name: "Aisha El-Sayed", club: "MAR", bias: false },
+{ id: "P075", name: "Linh Tran", club: "MAR", bias: false },
+{ id: "P076", name: "Diego Castillo", club: "MAR", bias: false },
+{ id: "P077", name: "Fatima Al-Hassan", club: "ARC", bias: false },
+{ id: "P078", name: "Olivia Montgomery", club: "ARC", bias: false },
+{ id: "P079", name: "Thiago Oliveira", club: "ARC", bias: false },
+{ id: "P080", name: "Zara Novak", club: "ARC", bias: false },
+{ id: "P081", name: "Amina Yusuf", club: "ARC", bias: false },
+{ id: "P082", name: "Hiroki Tanaka", club: "ARC", bias: false },
+{ id: "P083", name: "Lucas Oliveira", club: "ARC", bias: false },
+{ id: "P084", name: "Priya Singh", club: "ARC", bias: false },
+{ id: "P085", name: "Li Wei", club: "ARC", bias: false },
+{ id: "P086", name: "Jamal Thompson", club: "BLU", bias: false },
+{ id: "P087", name: "Sofia García", club: "BLU", bias: false },
+{ id: "P088", name: "Viktor Johansson", club: "BLU", bias: false },
+{ id: "P089", name: "Zuri Ndlovu", club: "BLU", bias: false },
+{ id: "P090", name: "Amara Diop", club: "BLU", bias: false },
+{ id: "P091", name: "Kenji Watanabe", club: "BLU", bias: false },
+{ id: "P092", name: "María Estévez", club: "BLU", bias: false },
+{ id: "P093", name: "Oskar Lindgren", club: "BLU", bias: false },
+{ id: "P094", name: "Aisha El-Sayed", club: "BLU", bias: false },
+{ id: "P095", name: "Linh Tran", club: "GRN", bias: false },
+{ id: "P096", name: "Diego Castillo", club: "GRN", bias: false },
+{ id: "P097", name: "Fatima Al-Hassan", club: "GRN", bias: false },
+{ id: "P098", name: "Olivia Montgomery", club: "GRN", bias: false },
+{ id: "P099", name: "Thiago Oliveira", club: "GRN", bias: false },
+{ id: "P100", name: "Zara Novak", club: "GRN", bias: false },
+{ id: "P101", name: "Amina Yusuf", club: "GRN", bias: false },
+{ id: "P102", name: "Hiroki Tanaka", club: "GRN", bias: false },
+{ id: "P103", name: "Lucas Oliveira", club: "GRN", bias: false },
+];
+
+const divisionABrackets = assignBrackets(divisionAPlayers);
+console.log("total players:", divisionAPlayers.length);
+console.log(JSON.stringify(divisionABrackets, null, 2));

package/src/stories/Button.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import './button.css';
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  backgroundColor = null,
+  size = 'medium',
+  label,
+  ...props
+}) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={backgroundColor && { backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  /** Is this the principal call to action on the page? */
+  primary: PropTypes.bool,
+  /** What background color to use */
+  backgroundColor: PropTypes.string,
+  /** How large should the button be? */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** Button contents */
+  label: PropTypes.string.isRequired,
+  /** Optional click handler */
+  onClick: PropTypes.func,
+};

package/src/stories/Button.stories.js

@@ -0,0 +1,49 @@
+import { fn } from '@storybook/test';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+export default {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};