@awesomephant/reactcake 0.0.0-stage → 1.0.0

package/.github/dependabot.yml

@@ -0,0 +1,14 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+  - package-ecosystem: "npm"
+    directory: "/site"
+    schedule:
+      interval: "monthly"
+  - package-ecosystem: "npm"
+    directory: "/lib"
+    schedule:
+      interval: "monthly"

package/.github/workflows/release.yml

@@ -0,0 +1,40 @@
+name: release
+on:
+  push:
+    branches:
+      - main
+permissions:
+  contents: read
+
+jobs:
+  verify:
+    name: verify
+    runs-on: ubuntu-slim
+    steps:
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - run: npm ci
+      - run: npm audit signatures
+      - run: npm run test
+
+  release:
+    name: release
+    runs-on: ubuntu-slim
+    needs: verify
+    permissions:
+      contents: write
+      issues: write
+      pull-requests: write
+      id-token: write
+    steps:
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - run: npm ci
+      - run: npm audit signatures
+      - run: npx semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Max Köhler
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Readme.md

@@ -0,0 +1,12 @@
+# ReactCake
+
+A headless chart framework for React inspired by [Layercake](https://layercake.graphics/). See [documentation](https://reactcake.maxkohler.com/) for usage and motivation.
+
+[![release](https://github.com/awesomephant/reactcake/actions/workflows/release.yml/badge.svg)](https://github.com/awesomephant/reactcake/actions/workflows/release.yml)
+
+## Contributing
+
+This project uses [esbuild](https://esbuild.github.io/) and Node's [built-in test runner](https://nodejs.org/api/test.html).
+
+- `npm i` to install dependencies
+- `npm run test` to run unit tests

package/lib/Html/index.tsx

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+
+interface HtmlProps {
+  children?: ReactNode;
+}
+
+const Html = ({ children }: HtmlProps) => {
+  return (
+    <div
+      className="reactcake-html"
+      style={{
+        position: "absolute",
+        height: "100%",
+        width: "100%",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Html;

package/lib/ReactCake/index.tsx

@@ -0,0 +1,126 @@
+import { createContext, useContext, type CSSProperties, type ReactNode } from "react";
+import { extent } from "d3-array";
+
+import { useDimensions } from "../hooks/useDimensions";
+import type { DatumValue, Padding, ScaleLike, ContextValue } from "../types";
+
+const ReactCakeContext = createContext<ContextValue>(null);
+
+interface ReactCakeProps {
+  x?: string | ((d: unknown, i: number) => Datum);
+  x2?: string | ((d: unknown, i: number) => Datum);
+  y?: string | ((d: unknown, i: number) => Datum);
+  data?: unknown[];
+  flatData?: unknown[];
+  padding?: Padding;
+  xScale?: ScaleLike;
+  yDomain?: [DatumValue | null, DatumValue | null];
+  yScale?: ScaleLike;
+  zScale?: ScaleLike;
+  style?: CSSProperties;
+  percentRange?: boolean;
+  children?: ReactNode;
+}
+
+const ReactCake = ({
+  data = [],
+  flatData,
+  x,
+  x2,
+  y,
+  z,
+  xDomain,
+  xRange,
+  yDomain,
+  zDomain,
+  yRange,
+  zRange,
+  xScale,
+  yScale,
+  zScale,
+  padding = { left: 0, right: 0, top: 0, bottom: 0 },
+  children,
+  percentRange = false,
+  style,
+}: ReactCakeProps) => {
+  const { ref: containerRef, width: containerWidth, height: containerHeight } = useDimensions();
+
+  const _padding = { left: 0, top: 0, right: 0, bottom: 0, ...padding };
+
+  const _x = typeof x === "string" ? (d) => d[x] : x;
+  const _x2 = typeof x2 === "string" ? (d) => d[x2] : x2;
+  const _y = typeof y === "string" ? (d) => d[y] : y;
+  const _z = typeof y === "string" ? (d) => d[z] : z;
+
+  const xIsBandscale = xScale && typeof xScale.bandwidth === "function";
+  const yIsBandscale = yScale && typeof yScale.bandwidth === "function";
+  const zIsBandscale = zScale && typeof zScale.bandwidth === "function";
+
+  const width = Math.max(0, percentRange ? 100 : containerWidth - _padding.left - _padding.right);
+  const height = Math.max(0, percentRange ? 100 : containerHeight - _padding.top - _padding.bottom);
+
+  const extentX = xIsBandscale
+    ? Array.from(new Set(data.map((d) => _x(d))))
+    : extent(flatData || data, _x);
+
+  const extentY = yIsBandscale
+    ? Array.from(new Set(data.map((d) => _y(d))))
+    : extent(flatData || data, _y);
+
+  const extentZ = zIsBandscale
+    ? Array.from(new Set(data.map((d) => _z(d))))
+    : extent(flatData || data, _z);
+
+  const _xScale = xScale?.range([0, width]).domain(xDomain || extentX);
+
+  const _yScale = yScale
+    ?.range([0, height])
+    .domain([
+      yDomain[0] !== null ? yDomain[0] : extentY[0],
+      yDomain[1] !== null ? yDomain[1] : extentY[1],
+    ]);
+
+  const _zScale = zScale?.range(zRange).domain(zDomain || extentZ);
+
+  const context = {
+    data: data,
+    x: _x,
+    x2: _x2,
+    y: _y,
+    z: _z,
+    xScale: _xScale,
+    yScale: _yScale,
+    zScale: _zScale,
+    xGet: (d: unknown) => _xScale(_x(d)),
+    yGet: (d: unknown) => _yScale(_y(d)),
+    zGet: (d: unknown) => _zScale(_z(d)),
+    height: height || 0,
+    width: width || 0,
+    containerWidth: containerWidth || 0,
+    containerHeight: containerHeight || 0,
+    padding: _padding,
+    viewBox: [0, 0, width, height],
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        ...style,
+        position: "relative",
+        width: "100%",
+        height: "100%",
+      }}
+    >
+      <ReactCakeContext.Provider value={context}>{children}</ReactCakeContext.Provider>
+    </div>
+  );
+};
+
+function useReactCake() {
+  const context = useContext(ReactCakeContext);
+  if (!context) throw new Error("Must be used inside ReactCake");
+  return context;
+}
+
+export { ReactCake, useReactCake };

package/lib/ScaledSvg/index.tsx

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+import { useReactCake } from "../ReactCake";
+
+interface SvgProps {
+  overflow?: "visible" | "hidden";
+  children?: ReactNode;
+}
+
+const ScaledSvg = ({ children, overflow = "visible" }: SvgProps) => {
+  const { padding } = useReactCake();
+  return (
+    <>
+      <style>{`svg * { vector-effect: non-scaling-stroke;}`}</style>
+      <svg
+        className="reactcake-svg"
+        preserveAspectRatio="none"
+        height={`calc(100% - ${padding.top}px - ${padding.bottom}px`}
+        width={`calc(100% - ${padding.left}px - ${padding.right}px`}
+        viewBox="0 0 100 100"
+        style={{
+          position: "absolute",
+          top: `${padding.top}px`,
+          left: `${padding.left}px`,
+          overflow: overflow,
+        }}
+      >
+        {children}
+      </svg>
+    </>
+  );
+};
+
+export default ScaledSvg;

package/lib/Svg/index.tsx

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+import { useReactCake } from "../ReactCake";
+
+interface SvgProps {
+  overflow?: "visible" | "hidden";
+  children?: ReactNode;
+}
+
+const Svg = ({ children, overflow = "hidden" }: SvgProps) => {
+  const { padding } = useReactCake();
+  return (
+    <svg
+      className="reactcake-svg"
+      preserveAspectRatio="none"
+      height="100%"
+      width="100%"
+      viewBox={`0 0 100 100`}
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        overflow: overflow,
+      }}
+    >
+      <g transform={`translate(${padding.left} ${padding.top})`}>{children}</g>
+    </svg>
+  );
+};
+
+export default Svg;

package/lib/hooks/useDimensions.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef, useState } from "react";
+
+type Dimensions = { width: number; height: number };
+
+export function useDimensions<T extends HTMLDivElement>() {
+  const ref = useRef<T | null>(null);
+
+  const [dimensions, setDimensions] = useState<Dimensions>({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const observer = new ResizeObserver(([entry]) => {
+      const { width, height } = entry.contentRect;
+      setDimensions({ width, height });
+    });
+
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
+  return { ref, width: dimensions.width, height: dimensions.height };
+}

package/lib/index.ts

@@ -0,0 +1,6 @@
+import Html from "./Html/index.tsx";
+import Svg from "./Svg";
+import ScaledSvg from "./ScaledSvg"
+import { ReactCake , useReactCake} from "./ReactCake";
+
+export {ReactCake, useReactCake, Html, Svg, ScaledSvg};

package/lib/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "reactcake",
+  "dependencies": {
+    "d3-array": "^3.2.4"
+  },
+  "release": {
+    "branches": [
+      "main"
+    ]
+  },
+  "devDependencies": {
+    "@types/d3-array": "^3.2.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "semantic-release": "^25.0.9",
+    "semantic-release-monorepo": "^8.0.2"
+  }
+}

package/lib/types.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+
+export type DatumValue = number | Date | string;
+export type TickFormatter<TValue = DatumValue> = (value: TValue) => ReactNode;
+
+export type Padding = {
+  top?: number;
+  left?: number;
+  right?: number;
+  bottom?: number;
+};
+
+export interface ScaleLike<T = DatumValue> {
+  (value: unknown): number;
+  domain: () => T[];
+  range: (range: [number, number]) => ScaleLike<T>;
+  ticks?: (count?: number) => T[];
+  tickFormat?: (count?: number) => TickFormatter<T>;
+  bandwidth?: () => number;
+  invert?: (d: number) => ScaleLike;
+}
+
+type Accessor = (x: DatumValue) => number
+
+export interface ContextValue {
+  width: number;
+  height: number;
+  xScale: ScaleLike;
+  yScale: ScaleLike;
+  zScale?: ScaleLike;
+  x: Accessor;
+  x2: Accessor;
+  y: Accessor;
+  data: unknown[];
+  xGet?: (d: unknown) => number;
+  yGet?: (d: unknown) => number;
+  zGet?: (d: unknown) => number | string;
+  padding: Padding;
+}

package/notes.md

@@ -0,0 +1 @@
+- Anything you draw past the edges shows up in the padding, the way it does on the other layouts. (https://layercake.graphics/guide#canvas)

package/package.json

@@ -1,6 +1,47 @@
 {
   "name": "@awesomephant/reactcake",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "A headless chart framework for React inspired by Layercake",
+  "keywords": [
+    "react",
+    "layercake",
+    "d3"
+  ],
+  "homepage": "https://reactcake.maxkohler.com",
+  "bugs": {
+    "url": "https://github.com/awesomephant/reactcake/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/awesomephant/reactcake.git"
+  },
+  "license": "MIT",
+  "author": "Max Köhler",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "prepublishOnly": "npm run build:lib",
+    "test": "node --import tsx --test",
+    "test:watch": "node --import tsx --test --watch",
+    "test:update-snapshots": "node --import tsx --test --test-update-snapshots",
+    "build:ts": "esbuild lib/index.ts --outdir=./dist --bundle",
+    "build:min": "esbuild lib/index.ts --outdir=./dist --entry-names=[dir]/[name].min --bundle --minify",
+    "build:types": "tsc",
+    "build:lib": "run-p 'build:ts' 'build:min'",
+    "build:demo": "esbuild src/index.ts src/index.html --loader:.html=copy --outdir=./_site --minify"
+  },
+  "devDependencies": {
+    "esbuild": "^0.28.0",
+    "npm-run-all": "^4.1.5",
+    "tsx": "^4.21.0",
+    "typescript": "^7.0.2"
+  },
+  "workspaces": [
+    "site",
+    "lib"
+  ],
+  "allowScripts": {
+    "esbuild@0.28.2": true,
+    "fsevents@2.3.3": true
+  }
+}

package/site/astro.config.mjs

@@ -0,0 +1,16 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+import mdx from '@astrojs/mdx';
+
+import react from '@astrojs/react';
+
+export default defineConfig({
+  markdown: {
+  shikiConfig: {
+    theme: 'github-light-high-contrast',
+    }
+  },
+
+  integrations: [mdx(), react()]
+});

package/site/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "site",
+  "type": "module",
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=22.23.4"
+  },
+  "scripts": {
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/markdown-satteri": "^0.4.6",
+    "@astrojs/mdx": "^8.1.2",
+    "@astrojs/react": "^7.1.2",
+    "astro": "^7.4.4",
+    "d3-scale": "^4.0.2",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
+  },
+  "devDependencies": {
+    "@types/d3-scale": "^4.0.9",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0"
+  }
+}

package/site/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 16 16"><text class="e" x="0" y="14" font-size="14">🍰</text></svg>

package/site/src/components/Example.astro

@@ -0,0 +1,16 @@
+---
+
+const {height, width = "100%"} = Astro.props
+
+---
+
+<div class="container" style={{height, width}}>
+  <slot/>
+</div>
+
+<style>
+  .container {
+    margin: 1rem 0;
+    border: 1px solid #2b598a;
+  }
+</style>

package/site/src/examples/AxisX.tsx

@@ -0,0 +1 @@
+// TKTK

package/site/src/examples/ColumnChart.tsx

@@ -0,0 +1,26 @@
+import { ReactCake, ScaledSvg, Html } from "../../../lib";
+import Columns from "./Columns";
+import { scaleLinear, scaleBand } from "d3-scale"
+
+const data = [
+  {year: 2022, value: 12},
+  {year: 2023, value: 22},
+  {year: 2024, value: 32},
+  {year: 2025, value: 15},
+  {year: 2026, value: 52}
+]
+
+const xScale = scaleBand().paddingInner(.1)
+
+export default function ColumnChart() {
+  return (
+    <ReactCake data={data} x="year" y="value" yScale={scaleLinear()} xScale={xScale} percentRange={true} yDomain={[0, null]} padding={{ top: 10, left: 10, right: 10, bottom: 10 }}>
+    <ScaledSvg>
+      <Columns/>
+    </ScaledSvg>
+    <Html>
+
+    </Html>
+  </ReactCake>
+  )
+}

package/site/src/examples/Columns.tsx

@@ -0,0 +1,30 @@
+import {  useReactCake } from '../../../lib';
+
+export default function Columns() {
+  const { data, x, xGet, yGet, xScale } = useReactCake();
+
+  console.log(data)
+
+  return (
+    <g className="column-group">
+      {data?.map((d) => {
+
+      const valueY = yGet(d)
+      const xGot = xGet(d)
+      const xPos = Array.isArray(xGot) ? xGot[0] : xGot
+      const colWidth = xScale.bandwidth ? xScale.bandwidth() : 20
+
+      return <rect
+        key={x(d)}
+        x={xPos}
+        y={100 - valueY}
+        width={colWidth}
+        height={valueY}
+        stroke="#196c9e"
+        fill="none"
+      />
+      })}
+    </g>
+
+  )
+}

package/site/src/layouts/Base.astro

@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>ReactCake</title>
+	</head>
+	<body>
+	<main class="content">
+		<slot />
+	</main>
+	</body>
+</html>
+
+<style is:global>
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+	body {
+		margin: 0;
+		width: 100%;
+		padding: 2rem 0;
+		font-family: sans-serif;
+	}
+
+	.content {
+	  max-width: 40rem;
+	  line-height: 1.4;
+	  margin: 0 auto;
+	}
+
+	p, li {
+	  letter-spacing: .002em;
+	}
+
+	h2 {
+	  margin-top: 2rem;
+	  margin-bottom: .25rem;
+	}
+	h3 {
+	  margin-top: 1.25rem;
+	  margin-bottom: 0.1rem;
+		font-weight: 600;
+	}
+
+	p, ul, ol {
+	  margin-bottom: 1rem;
+	}
+
+	ul, ol {
+	  margin-left: 1em;
+	}
+
+
+	.astro-code {
+	  border-top: 1px solid lightgray;
+	  border-bottom: 1px solid lightgray;
+	  margin: 1rem 0;
+		padding: 1em 0;
+		line-height: 1.25;
+		font-family: monospace;
+	}
+
+</style>

package/site/src/pages/index.mdx

@@ -0,0 +1,73 @@
+---
+layout: "../layouts/Base.astro"
+
+---
+
+import Example from "../components/Example.astro"
+import ColumnChart from "../examples/ColumnChart.tsx"
+
+# ReactCake
+
+A headless chart framework for React inspired by [Layercake](https://layercake.graphics/).
+
+<Example height="12rem" width="20rem">
+  <ColumnChart></ColumnChart>
+</Example>
+
+## Installation
+
+```bash
+npm install --save reactcake
+```
+
+## Usage
+
+```tsx
+import { ReactCake, Html, Svg } from "reactcake";
+import { scaleLinear, scaleBand } from "d3-scale"
+
+// Chart components live in your project
+import { xScale, yScale, Bars } from "./lib";
+
+const data = [
+  {year: 2024, value: 32},
+  {year: 2025, value: 15},
+  {year: 2026, value: 52}
+];
+
+const xKey = "date";
+const yKey = "value";
+const xScale = scaleTime();
+const xScale = scaleBand();
+
+return (
+  <ReactCake data={data} x="year" y="value" xScale={xScale} yScale={yScale}>
+    <Html>
+      <AxisX />
+      <AxisY />
+    </Html>
+    <Svg>
+      <Bars/>
+    </Svg>
+  </ReactCake>
+);
+```
+
+## Concepts
+
+ReactCake provides useful context for drawing data-driven charts, like a coordinate system, data extents and shared margins. Components that draw actual chart elements, like bars and lines, live in your project (or maybe a local component library), ReactCake is completely agnostic to what you render with it.
+
+It provides sensible defaults and infers as much information as possible from your data, but also exposes fine-grained props to configure things yourself.
+
+ReactCake is built on [D3](https://d3js.org/what-is-d3).
+
+### Relationship to Layercake
+
+This project is an attempt to translate the overall approach and development ergonomics of the Layercake framework from Svelte to React. It does not aim for feature parity or identical API surfaces.
+
+
+### Prior work
+
+- [A new technique for making responsive, JavaScript-free charts](https://dev.to/richharris/a-new-technique-for-making-responsive-javascript-free-charts-gmp)
+- [Layercake](https://layercake.graphics/)
+- [pancake](https://github.com/Rich-Harris/pancake)

package/site/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [
+    ".astro/types.d.ts",
+    "**/*"
+  ],
+  "exclude": [
+    "dist"
+  ],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "strict": false,
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleResolution": "bundler",
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "outDir": "dist",
+    "rootDir": "./lib",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "allowImportingTsExtensions": true,
+    "lib": ["es2022", "dom"],
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+  },
+  "files": ["./lib/index.ts"],
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.