tournaments-bracket 2.0.4

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/cli/generate.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli/generate.js

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+import path from "path";
+import { generateBracket } from "../core/generateBracket.js";
+const teamsPath = path.resolve(process.cwd(), "src/teams.ts");
+const teamsUrl = new URL(`file://${teamsPath}`);
+(async () => {
+    const teamsModule = await import(teamsUrl.href);
+    const teams = teamsModule.teams;
+    generateBracket(teams, path.resolve(process.cwd(), "src/bracket/rounds.ts"));
+})();

package/dist/components/Match.d.ts

@@ -0,0 +1,7 @@
+import { Match as MatchType } from '../core/types';
+type Props = {
+    match: MatchType;
+    isFinal?: boolean;
+};
+export declare function Match({ match, isFinal }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RoundColumn.d.ts

@@ -0,0 +1,7 @@
+import { Round } from '../core/types';
+type Props = {
+    round: Round;
+    matchRefs: React.MutableRefObject<Record<number, HTMLDivElement | null>>;
+};
+export declare function RoundColumn({ round, matchRefs }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TeamBox.d.ts

@@ -0,0 +1,7 @@
+import { Team } from '../core/types';
+type Props = {
+    team?: Team | null;
+    status: "winner" | "loser" | "default";
+};
+export declare function TeamBox({ team, status }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TournamentBracket.d.ts

@@ -0,0 +1,10 @@
+import { BracketTheme, Round } from '../core/types';
+type Props = {
+    rounds: Round[];
+    theme?: BracketTheme & {
+        lineStyle?: "straight" | "angled" | "curved";
+    };
+    className?: string;
+};
+export declare function TournamentBracket({ rounds, theme, className }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/core/generateBracket.d.ts

@@ -0,0 +1,2 @@
+import type { Team } from "../core/types.js";
+export declare function generateBracket(teams: Team[], outputFile: string): void;

package/dist/core/generateBracket.js

@@ -0,0 +1,31 @@
+import fs from "fs";
+import path from "path";
+export function generateBracket(teams, outputFile) {
+    const rounds = [];
+    let matchId = 1;
+    let currentRoundTeams = [...teams];
+    while (currentRoundTeams.length > 1) {
+        const roundMatches = [];
+        for (let i = 0; i < currentRoundTeams.length; i += 2) {
+            const match = {
+                id: matchId++,
+                teams: [
+                    currentRoundTeams[i] ?? null,
+                    currentRoundTeams[i + 1] ?? null
+                ],
+                winnerId: null
+            };
+            roundMatches.push(match);
+        }
+        rounds.push(roundMatches);
+        currentRoundTeams = Array(Math.ceil(currentRoundTeams.length / 2)).fill(null);
+    }
+    const outputPath = path.resolve(outputFile);
+    fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+    const content = `import type { Round } from "tournaments-bracket";
+
+export const rounds: Round[] = ${JSON.stringify(rounds, null, 2)};
+`;
+    fs.writeFileSync(outputPath, content);
+    console.log("✔ Bracket generated:", outputPath);
+}

package/dist/core/types.d.ts

@@ -0,0 +1,24 @@
+export type Team = {
+    id: number | string;
+    name: string;
+    logo?: string;
+};
+export type Match = {
+    id: number;
+    teams: [Team | null, Team | null];
+    winnerId?: Team["id"] | null;
+};
+export type BracketTheme = {
+    bgTeam?: string;
+    borderColor?: string;
+    lineColor?: string;
+    teamWidth?: string;
+    lineWidth?: string;
+    borderWin?: string;
+    opacityWin?: string;
+    bgWin?: string;
+    borderLos?: string;
+    opacityLos?: string;
+    bgLos?: string;
+};
+export type Round = Match[];

package/dist/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { TournamentBracket } from './components/TournamentBracket';
+export type { Team, Match, BracketTheme } from './core/types';

package/dist/index.es.js

@@ -0,0 +1,103 @@
+import { jsx as o, jsxs as p, Fragment as F } from "react/jsx-runtime";
+import { useRef as B, useState as S, useLayoutEffect as T } from "react";
+function M({ team: t, status: n }) {
+  return /* @__PURE__ */ o("div", { className: `team ${t ? `${n}` : "empty"}`, children: t ? /* @__PURE__ */ p(F, { children: [
+    t.logo && /* @__PURE__ */ o("img", { src: t.logo, alt: t.name }),
+    /* @__PURE__ */ o("span", { children: t.name })
+  ] }) : /* @__PURE__ */ o("span", { children: "Нет участника" }) });
+}
+function P({ match: t, isFinal: n }) {
+  const [r, e] = t.teams, i = t.winnerId === r?.id ? r : t.winnerId === e?.id ? e : null, u = i && r && e ? i.id === r.id ? e : r : null;
+  return /* @__PURE__ */ p("div", { className: "group", children: [
+    /* @__PURE__ */ o(
+      M,
+      {
+        team: r,
+        status: i?.id === r?.id ? "winner" : u?.id === r?.id ? "loser" : "default"
+      }
+    ),
+    !(n && !e) && /* @__PURE__ */ o(
+      M,
+      {
+        team: e,
+        status: i?.id === e?.id ? "winner" : u?.id === e?.id ? "loser" : "default"
+      }
+    )
+  ] });
+}
+function j(t) {
+  return t ? {
+    "--tb-bg-team": t.bgTeam,
+    "--tb-border": t.borderColor,
+    "--tb-stroke": t.lineColor,
+    "--tb-team-width": t.teamWidth,
+    "--tb-line-width": t.lineWidth,
+    "--tb-border-winner": t.borderWin,
+    "--tb-opacity-winner": t.opacityWin,
+    "--tb-bg-winner": t.bgWin,
+    "--tb-border-loser": t.borderLos,
+    "--tb-opacity-loser": t.opacityLos,
+    "--tb-bg-loser": t.bgLos
+  } : {};
+}
+function N(t, n, r = "angled", e = 24) {
+  switch (r) {
+    case "curved": {
+      const i = t.x + (n.x - t.x) / 2;
+      return `M ${t.x} ${t.y} C ${i} ${t.y}, ${i} ${n.y}, ${n.x} ${n.y}`;
+    }
+    case "straight":
+      return `M ${t.x} ${t.y} L ${n.x} ${n.y}`;
+    default:
+      return `M ${t.x} ${t.y} H ${t.x + e} V ${n.y} H ${n.x}`;
+  }
+}
+function X({ rounds: t, theme: n, className: r }) {
+  const e = B(null), i = B({}), [u, v] = S([]);
+  function $(c, l) {
+    const s = c.getBoundingClientRect(), a = l.getBoundingClientRect();
+    return {
+      x: s.right - a.left,
+      y: s.top - a.top + s.height / 2
+    };
+  }
+  return T(() => {
+    if (!e.current) return;
+    const c = e.current, l = [], s = n?.lineStyle ?? "angled";
+    t.forEach((a, d) => {
+      a.forEach((f, E) => {
+        const g = i.current[f.id];
+        if (!g) return;
+        const b = g.querySelector(".team:nth-child(1)"), m = g.querySelector(".team:nth-child(2)");
+        if (d === t.length - 1 && a.length === 1 || !b || !m) return;
+        const h = $(b, c), y = $(m, c);
+        l.push(N(h, y, s));
+        const w = { x: (h.x + y.x) / 2, y: (h.y + y.y) / 2 };
+        if (d < t.length - 1) {
+          const W = t[d + 1][Math.floor(E / 2)], C = i.current[W?.id];
+          if (!C) return;
+          const x = C.getBoundingClientRect(), R = c.getBoundingClientRect(), k = { x: x.left - R.left, y: x.top - R.top + x.height / 2 }, L = { x: w.x + 24, y: w.y };
+          l.push(N(L, k, s));
+        }
+      });
+    }), v(l);
+  }, [t, n]), /* @__PURE__ */ p("div", { className: `tournament-bracket bracket ${r ?? ""}`, style: j(n), ref: e, children: [
+    /* @__PURE__ */ o("svg", { className: "lines-layer", children: u.map((c, l) => /* @__PURE__ */ o("path", { d: c, stroke: n?.lineColor, fill: "none", strokeWidth: n?.lineWidth ?? 2 }, l)) }),
+    t.map((c, l) => /* @__PURE__ */ o("div", { className: "round-column", children: c.map((s, a) => {
+      const d = a === t.length - 1 && c.length === 1;
+      return /* @__PURE__ */ o(
+        "div",
+        {
+          ref: (f) => {
+            i.current[s.id] = f;
+          },
+          children: /* @__PURE__ */ o(P, { match: s, isFinal: d })
+        },
+        s.id
+      );
+    }) }, l))
+  ] });
+}
+export {
+  X as TournamentBracket
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.TournamentsBracket={},a.jsxRuntime,a.React))})(this,(function(a,e,u){"use strict";function $({team:t,status:n}){return e.jsx("div",{className:`team ${t?`${n}`:"empty"}`,children:t?e.jsxs(e.Fragment,{children:[t.logo&&e.jsx("img",{src:t.logo,alt:t.name}),e.jsx("span",{children:t.name})]}):e.jsx("span",{children:"Нет участника"})})}function N({match:t,isFinal:n}){const[i,r]=t.teams,o=t.winnerId===i?.id?i:t.winnerId===r?.id?r:null,g=o&&i&&r?o.id===i.id?r:i:null;return e.jsxs("div",{className:"group",children:[e.jsx($,{team:i,status:o?.id===i?.id?"winner":g?.id===i?.id?"loser":"default"}),!(n&&!r)&&e.jsx($,{team:r,status:o?.id===r?.id?"winner":g?.id===r?.id?"loser":"default"})]})}function E(t){return t?{"--tb-bg-team":t.bgTeam,"--tb-border":t.borderColor,"--tb-stroke":t.lineColor,"--tb-team-width":t.teamWidth,"--tb-line-width":t.lineWidth,"--tb-border-winner":t.borderWin,"--tb-opacity-winner":t.opacityWin,"--tb-bg-winner":t.bgWin,"--tb-border-loser":t.borderLos,"--tb-opacity-loser":t.opacityLos,"--tb-bg-loser":t.bgLos}:{}}function w(t,n,i="angled",r=24){switch(i){case"curved":{const o=t.x+(n.x-t.x)/2;return`M ${t.x} ${t.y} C ${o} ${t.y}, ${o} ${n.y}, ${n.x} ${n.y}`}case"straight":return`M ${t.x} ${t.y} L ${n.x} ${n.y}`;default:return`M ${t.x} ${t.y} H ${t.x+r} V ${n.y} H ${n.x}`}}function S({rounds:t,theme:n,className:i}){const r=u.useRef(null),o=u.useRef({}),[g,W]=u.useState([]);function B(c,l){const s=c.getBoundingClientRect(),d=l.getBoundingClientRect();return{x:s.right-d.left,y:s.top-d.top+s.height/2}}return u.useLayoutEffect(()=>{if(!r.current)return;const c=r.current,l=[],s=n?.lineStyle??"angled";t.forEach((d,f)=>{d.forEach((h,m)=>{const y=o.current[h.id];if(!y)return;const C=y.querySelector(".team:nth-child(1)"),M=y.querySelector(".team:nth-child(2)");if(f===t.length-1&&d.length===1||!C||!M)return;const p=B(C,c),x=B(M,c);l.push(w(p,x,s));const T={x:(p.x+x.x)/2,y:(p.y+x.y)/2};if(f<t.length-1){const L=t[f+1][Math.floor(m/2)],k=o.current[L?.id];if(!k)return;const b=k.getBoundingClientRect(),v=c.getBoundingClientRect(),j={x:b.left-v.left,y:b.top-v.top+b.height/2},F={x:T.x+24,y:T.y};l.push(w(F,j,s))}})}),W(l)},[t,n]),e.jsxs("div",{className:`tournament-bracket bracket ${i??""}`,style:E(n),ref:r,children:[e.jsx("svg",{className:"lines-layer",children:g.map((c,l)=>e.jsx("path",{d:c,stroke:n?.lineColor,fill:"none",strokeWidth:n?.lineWidth??2},l))}),t.map((c,l)=>e.jsx("div",{className:"round-column",children:c.map((s,d)=>{const f=d===t.length-1&&c.length===1;return e.jsx("div",{ref:h=>{o.current[s.id]=h},children:e.jsx(N,{match:s,isFinal:f})},s.id)})},l))]})}a.TournamentBracket=S,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));

package/dist/tournaments-bracket.css

@@ -0,0 +1,103 @@
+.tournament-bracket {
+  --tb-bg-team: #0f172a;
+  --tb-border: #334155;
+  --tb-stroke: #38bdf8;
+  --tb-smooth: round;
+  --tb-team-width: 260px;
+  --tb-gap-rounds: 80px;
+  --tb-gap-matches: 20px;
+  --tb-line-width: 2px;
+  --tb-border-winner: #2ecc71;
+  --tb-opacity-winner: 1;
+  --tb-bg-winner: #0f172a;
+  --tb-border-loser: #e74c3c;
+  --tb-opacity-loser: 0.7;
+  --tb-bg-loser: #0f172a;
+}
+
+.bracket {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  gap: 120px;
+  padding: 40px;
+}
+
+.round-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  gap: 20px;
+}
+
+.round {
+  display: grid;
+  grid-auto-rows: minmax(120px, auto);
+  gap: 60px;
+}
+
+.group,
+.teams
+{
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.match {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.team {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: var(--tb-team-width);
+  padding: 8px 12px;
+  background: var(--tb-bg-team);
+  border-radius: 10px;
+  border: 1px solid var(--tb-border);
+}
+
+.team img {
+  width: 36px;
+  height: 36px;
+}
+
+.team.empty {
+  justify-content: center;
+  opacity: 0.6;
+  border-style: dashed;
+}
+
+.lines-layer {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.lines-layer path {
+  stroke: var(--tb-stroke);
+  stroke-width: var(--tb-line-width,2);
+  fill: none;
+  stroke-linejoin: var(--tb-smooth);
+  stroke-linecap: var(--tb-smooth);
+}
+
+.team.winner {
+  border-color: var(--tb-border-winner);
+  background: var(--tb-bg-winner);
+  opacity: var(--tb-opacity-winner);
+}
+
+.team.loser {
+  border-color: var(--tb-border-loser);
+  background: var(--tb-bg-loser);
+  opacity: var(--tb-opacity-loser);
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "tournaments-bracket",
+  "version": "2.0.4",
+  "type": "module",
+
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+
+  "files": ["dist"],
+  "scripts": {
+    "build": "vite build && tsc -b tsconfig.cli.json"
+  },
+  "bin": {
+    "tournaments-bracket-generate": "./dist/cli/generate.js"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^5.1.2",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}