@playfast/reform-better-hub-ui-primitives 0.2.2 → 0.4.0

package/src/components/github-background.tsx

@@ -1,236 +1,234 @@
-import type * as React from "react";
-import { useMemo } from "react";
+import type * as React from 'react'
+import { useMemo } from 'react'
 
-const RNG_MULTIPLIER = 16807;
-const RNG_MODULUS = 2147483647;
-const RNG_DIVISOR = 2147483646;
-const RNG_SEED = 42;
-const WEEKS = 52;
-const DAYS_PER_WEEK = 7;
-const CELL = 15;
-const CELL_RECT_SIZE = 12;
-const CELL_ANIM_WEEK_DELAY = 0.04;
-const CELL_ANIM_DAY_DELAY = 0.015;
+const RNG_MULTIPLIER = 16807
+const RNG_MODULUS = 2147483647
+const RNG_DIVISOR = 2147483646
+const RNG_SEED = 42
+const WEEKS = 52
+const DAYS_PER_WEEK = 7
+const CELL = 15
+const CELL_RECT_SIZE = 12
+const CELL_ANIM_WEEK_DELAY = 0.04
+const CELL_ANIM_DAY_DELAY = 0.015
 
 const LEVELS = [
-	"rgba(255,255,255,0.02)",
-	"rgba(255,255,255,0.10)",
-	"rgba(255,255,255,0.18)",
-	"rgba(255,255,255,0.28)",
-	"rgba(255,255,255,0.40)",
-];
+  'rgba(255,255,255,0.02)',
+  'rgba(255,255,255,0.10)',
+  'rgba(255,255,255,0.18)',
+  'rgba(255,255,255,0.28)',
+  'rgba(255,255,255,0.40)',
+]
 
-const LEVEL_THRESHOLDS = [0.3, 0.5, 0.7, 0.85];
+const LEVEL_THRESHOLDS = [0.3, 0.5, 0.7, 0.85]
 
 const COMMIT_GROUPS = [
-	{
-		prefix: "m",
-		cx: 200,
-		radius: 4,
-		fill: "rgba(255,255,255,0.25)",
-		ys: [80, 150, 230, 300, 400, 480, 550, 620, 690, 770, 850],
-		animBase: 0.5,
-		animStep: 0.15,
-	},
-	{
-		prefix: "f1",
-		cx: 280,
-		radius: 3.5,
-		fill: "rgba(255,255,255,0.20)",
-		ys: [230, 280, 330],
-		animBase: 1.0,
-		animStep: 0.2,
-	},
-	{
-		prefix: "f2",
-		cx: 130,
-		radius: 3.5,
-		fill: "rgba(255,255,255,0.18)",
-		ys: [360, 420, 470],
-		animBase: 1.5,
-		animStep: 0.2,
-	},
-	{
-		prefix: "hf",
-		cx: 260,
-		radius: 3,
-		fill: "rgba(255,255,255,0.15)",
-		ys: [600, 630, 660],
-		animBase: 2.0,
-		animStep: 0.2,
-	},
-	{
-		prefix: "f3",
-		cx: 110,
-		radius: 3,
-		fill: "rgba(255,255,255,0.12)",
-		ys: [680, 730, 780],
-		animBase: 2.4,
-		animStep: 0.2,
-	},
-];
+  {
+    prefix: 'm',
+    cx: 200,
+    radius: 4,
+    fill: 'rgba(255,255,255,0.25)',
+    ys: [80, 150, 230, 300, 400, 480, 550, 620, 690, 770, 850],
+    animBase: 0.5,
+    animStep: 0.15,
+  },
+  {
+    prefix: 'f1',
+    cx: 280,
+    radius: 3.5,
+    fill: 'rgba(255,255,255,0.20)',
+    ys: [230, 280, 330],
+    animBase: 1.0,
+    animStep: 0.2,
+  },
+  {
+    prefix: 'f2',
+    cx: 130,
+    radius: 3.5,
+    fill: 'rgba(255,255,255,0.18)',
+    ys: [360, 420, 470],
+    animBase: 1.5,
+    animStep: 0.2,
+  },
+  {
+    prefix: 'hf',
+    cx: 260,
+    radius: 3,
+    fill: 'rgba(255,255,255,0.15)',
+    ys: [600, 630, 660],
+    animBase: 2.0,
+    animStep: 0.2,
+  },
+  {
+    prefix: 'f3',
+    cx: 110,
+    radius: 3,
+    fill: 'rgba(255,255,255,0.12)',
+    ys: [680, 730, 780],
+    animBase: 2.4,
+    animStep: 0.2,
+  },
+]
 
-const nextSeed = (seed: number) => (seed * RNG_MULTIPLIER) % RNG_MODULUS;
-const seedToUnit = (seed: number) => (seed - 1) / RNG_DIVISOR;
+const nextSeed = (seed: number) => (seed * RNG_MULTIPLIER) % RNG_MODULUS
+const seedToUnit = (seed: number) => (seed - 1) / RNG_DIVISOR
 const levelForValue = (sample: number) =>
-	LEVEL_THRESHOLDS.filter((threshold) => sample >= threshold).length;
+  LEVEL_THRESHOLDS.filter((threshold) => sample >= threshold).length
 
-type Cell = { week: number; day: number; level: number };
+type Cell = { week: number; day: number; level: number }
 
 export function GitHubBackground(): React.JSX.Element {
-	const grid = useMemo<Cell[]>(
-		() =>
-			Array.from({ length: WEEKS * DAYS_PER_WEEK }).reduce<{
-				seed: number;
-				cells: Cell[];
-			}>(
-				(acc, _slot, flatIndex) => {
-					const seed = nextSeed(acc.seed);
-					const level = levelForValue(seedToUnit(seed));
-					const week = Math.floor(flatIndex / DAYS_PER_WEEK);
-					const day = flatIndex % DAYS_PER_WEEK;
-					return { seed, cells: [...acc.cells, { week, day, level }] };
-				},
-				{ seed: RNG_SEED, cells: [] },
-			).cells,
-		[],
-	);
+  const grid = useMemo<Cell[]>(
+    () =>
+      Array.from({ length: WEEKS * DAYS_PER_WEEK }).reduce<{
+        seed: number
+        cells: Cell[]
+      }>(
+        (acc, _slot, flatIndex) => {
+          const seed = nextSeed(acc.seed)
+          const level = levelForValue(seedToUnit(seed))
+          const week = Math.floor(flatIndex / DAYS_PER_WEEK)
+          const day = flatIndex % DAYS_PER_WEEK
+          return { seed, cells: [...acc.cells, { week, day, level }] }
+        },
+        { seed: RNG_SEED, cells: [] },
+      ).cells,
+    [],
+  )
 
-	return (
-		<div
-			className="absolute inset-0 pointer-events-none overflow-hidden"
-			style={{ zIndex: 2 }}
-		>
-			<div
-				className="absolute inset-0"
-				style={{
-					maskImage: "radial-gradient(ellipse 85% 75% at 45% 35%, black 15%, transparent 60%)",
-					WebkitMaskImage:
-						"radial-gradient(ellipse 85% 75% at 45% 35%, black 15%, transparent 60%)",
-				}}
-			>
-				<div
-					className="absolute"
-					style={{
-						top: "8%",
-						left: "50%",
-						transform: "translate(-50%, 0) perspective(500px) rotateX(30deg) rotateZ(-2deg) scale(1.3)",
-						transformOrigin: "center top",
-						opacity: 0.4,
-					}}
-				>
-					<svg
-						width={WEEKS * CELL}
-						height={DAYS_PER_WEEK * CELL}
-						viewBox={`0 0 ${WEEKS * CELL} ${DAYS_PER_WEEK * CELL}`}
-					>
-						{grid.map((cell, index) => (
-							<rect
-								key={index}
-								x={cell.week * CELL}
-								y={cell.day * CELL}
-								width={CELL_RECT_SIZE}
-								height={CELL_RECT_SIZE}
-								rx={2}
-								fill={LEVELS[cell.level]}
-								opacity={0}
-							>
-								<animate
-									attributeName="opacity"
-									from="0"
-									to="1"
-									dur="0.5s"
-									begin={`${cell.week * CELL_ANIM_WEEK_DELAY + cell.day * CELL_ANIM_DAY_DELAY}s`}
-									fill="freeze"
-								/>
-							</rect>
-						))}
-					</svg>
-				</div>
+  return (
+    <div className="absolute inset-0 pointer-events-none overflow-hidden" style={{ zIndex: 2 }}>
+      <div
+        className="absolute inset-0"
+        style={{
+          maskImage: 'radial-gradient(ellipse 85% 75% at 45% 35%, black 15%, transparent 60%)',
+          WebkitMaskImage:
+            'radial-gradient(ellipse 85% 75% at 45% 35%, black 15%, transparent 60%)',
+        }}
+      >
+        <div
+          className="absolute"
+          style={{
+            top: '8%',
+            left: '50%',
+            transform:
+              'translate(-50%, 0) perspective(500px) rotateX(30deg) rotateZ(-2deg) scale(1.3)',
+            transformOrigin: 'center top',
+            opacity: 0.4,
+          }}
+        >
+          <svg
+            width={WEEKS * CELL}
+            height={DAYS_PER_WEEK * CELL}
+            viewBox={`0 0 ${WEEKS * CELL} ${DAYS_PER_WEEK * CELL}`}
+          >
+            {grid.map((cell, index) => (
+              <rect
+                key={index}
+                x={cell.week * CELL}
+                y={cell.day * CELL}
+                width={CELL_RECT_SIZE}
+                height={CELL_RECT_SIZE}
+                rx={2}
+                fill={LEVELS[cell.level]}
+                opacity={0}
+              >
+                <animate
+                  attributeName="opacity"
+                  from="0"
+                  to="1"
+                  dur="0.5s"
+                  begin={`${cell.week * CELL_ANIM_WEEK_DELAY + cell.day * CELL_ANIM_DAY_DELAY}s`}
+                  fill="freeze"
+                />
+              </rect>
+            ))}
+          </svg>
+        </div>
 
-				<svg
-					className="absolute inset-0 w-full h-full"
-					viewBox="0 0 400 900"
-					preserveAspectRatio="xMidYMid slice"
-					style={{ opacity: 0.45 }}
-				>
-					<line
-						x1="200"
-						y1="0"
-						x2="200"
-						y2="900"
-						stroke="rgba(255,255,255,0.15)"
-						strokeWidth="2"
-						pathLength={1}
-						className="git-line-anim"
-						style={{ animationDelay: "0.3s" }}
-					/>
+        <svg
+          className="absolute inset-0 w-full h-full"
+          viewBox="0 0 400 900"
+          preserveAspectRatio="xMidYMid slice"
+          style={{ opacity: 0.45 }}
+        >
+          <line
+            x1="200"
+            y1="0"
+            x2="200"
+            y2="900"
+            stroke="rgba(255,255,255,0.15)"
+            strokeWidth="2"
+            pathLength={1}
+            className="git-line-anim"
+            style={{ animationDelay: '0.3s' }}
+          />
 
-					<path
-						d="M 200 150 C 200 180, 280 200, 280 230 L 280 350 C 280 380, 200 395, 200 400"
-						stroke="rgba(255,255,255,0.12)"
-						strokeWidth="2"
-						fill="none"
-						pathLength={1}
-						className="git-line-anim"
-						style={{ animationDelay: "0.8s" }}
-					/>
+          <path
+            d="M 200 150 C 200 180, 280 200, 280 230 L 280 350 C 280 380, 200 395, 200 400"
+            stroke="rgba(255,255,255,0.12)"
+            strokeWidth="2"
+            fill="none"
+            pathLength={1}
+            className="git-line-anim"
+            style={{ animationDelay: '0.8s' }}
+          />
 
-					<path
-						d="M 200 300 C 200 325, 130 340, 130 360 L 130 500 C 130 525, 200 540, 200 550"
-						stroke="rgba(255,255,255,0.10)"
-						strokeWidth="2"
-						fill="none"
-						pathLength={1}
-						className="git-line-anim"
-						style={{ animationDelay: "1.3s" }}
-					/>
+          <path
+            d="M 200 300 C 200 325, 130 340, 130 360 L 130 500 C 130 525, 200 540, 200 550"
+            stroke="rgba(255,255,255,0.10)"
+            strokeWidth="2"
+            fill="none"
+            pathLength={1}
+            className="git-line-anim"
+            style={{ animationDelay: '1.3s' }}
+          />
 
-					<path
-						d="M 200 550 C 200 570, 260 580, 260 600 L 260 650 C 260 670, 200 680, 200 690"
-						stroke="rgba(255,255,255,0.08)"
-						strokeWidth="2"
-						fill="none"
-						pathLength={1}
-						className="git-line-anim"
-						style={{ animationDelay: "1.8s" }}
-					/>
+          <path
+            d="M 200 550 C 200 570, 260 580, 260 600 L 260 650 C 260 670, 200 680, 200 690"
+            stroke="rgba(255,255,255,0.08)"
+            strokeWidth="2"
+            fill="none"
+            pathLength={1}
+            className="git-line-anim"
+            style={{ animationDelay: '1.8s' }}
+          />
 
-					<path
-						d="M 200 620 C 200 640, 110 660, 110 680 L 110 800 C 110 820, 200 835, 200 850"
-						stroke="rgba(255,255,255,0.07)"
-						strokeWidth="2"
-						fill="none"
-						pathLength={1}
-						className="git-line-anim"
-						style={{ animationDelay: "2.2s" }}
-					/>
+          <path
+            d="M 200 620 C 200 640, 110 660, 110 680 L 110 800 C 110 820, 200 835, 200 850"
+            stroke="rgba(255,255,255,0.07)"
+            strokeWidth="2"
+            fill="none"
+            pathLength={1}
+            className="git-line-anim"
+            style={{ animationDelay: '2.2s' }}
+          />
 
-					{COMMIT_GROUPS.map((group) =>
-						group.ys.map((nodeY, index) => (
-							<circle
-								key={`${group.prefix}${index}`}
-								cx={group.cx}
-								cy={nodeY}
-								r={group.radius}
-								fill={group.fill}
-								opacity={0}
-							>
-								<animate
-									attributeName="opacity"
-									from="0"
-									to="1"
-									dur="0.3s"
-									begin={`${group.animBase + index * group.animStep}s`}
-									fill="freeze"
-								/>
-							</circle>
-						)),
-					)}
-				</svg>
-			</div>
+          {COMMIT_GROUPS.map((group) =>
+            group.ys.map((nodeY, index) => (
+              <circle
+                key={`${group.prefix}${index}`}
+                cx={group.cx}
+                cy={nodeY}
+                r={group.radius}
+                fill={group.fill}
+                opacity={0}
+              >
+                <animate
+                  attributeName="opacity"
+                  from="0"
+                  to="1"
+                  dur="0.3s"
+                  begin={`${group.animBase + index * group.animStep}s`}
+                  fill="freeze"
+                />
+              </circle>
+            )),
+          )}
+        </svg>
+      </div>
 
-			<style>{`
+      <style>{`
 				.git-line-anim {
 					stroke-dasharray: 1;
 					stroke-dashoffset: 1;
@@ -240,6 +238,6 @@ export function GitHubBackground(): React.JSX.Element {
 					to { stroke-dashoffset: 0; }
 				}
 			`}</style>
-		</div>
-	);
+    </div>
+  )
 }