@awesomephant/reactcake 1.1.0 → 1.1.2

package/lib/Html/index.tsx

@@ -1,22 +1,27 @@
 import { type ReactNode } from "react";
 import { useReactCake } from "../ReactCake";
+import { LayoutProps } from "../types";
 
-interface HtmlProps {
+interface HtmlProps extends LayoutProps {
   children?: ReactNode;
 }
 
-const Html = ({ children }: HtmlProps) => {
+const Html = ({ overflow = "visible", label, labelledBy, describedBy, children }: HtmlProps) => {
   const { padding } = useReactCake();
 
   return (
     <div
       className="reactcake-html"
+      aria-label={labelledBy}
+      aria-describedby={describedBy}
+      role={label ? "figure" : "none"}
       style={{
         position: "absolute",
-        top: padding.top,
-        left: padding.left,
-        right: padding.right,
-        bottom: padding.bottom,
+        top: `${padding.top}px`,
+        left: `${padding.left}px`,
+        right: `${padding.right}px`,
+        bottom: `${padding.bottom}px`,
+        overflow,
       }}
     >
       {children}

package/lib/ScaledSvg/index.tsx

@@ -1,18 +1,29 @@
 import { type ReactNode } from "react";
 import { useReactCake } from "../ReactCake";
+import { LayoutProps } from "../types";
 
-interface SvgProps {
-  overflow?: "visible" | "hidden";
+interface SvgProps extends LayoutProps {
+  title?: string;
   children?: ReactNode;
 }
 
-const ScaledSvg = ({ children, overflow = "visible" }: SvgProps) => {
+const ScaledSvg = ({
+  children,
+  label,
+  labelledBy,
+  describedBy,
+  title,
+  overflow = "visible",
+}: SvgProps) => {
   const { padding } = useReactCake();
   return (
     <>
       <style>{`svg * { vector-effect: non-scaling-stroke;}`}</style>
       <svg
         className="reactcake-svg"
+        aria-label={labelledBy}
+        aria-describedby={describedBy}
+        role={label ? "figure" : "none"}
         preserveAspectRatio="none"
         height={`calc(100% - ${padding.top}px - ${padding.bottom}px`}
         width={`calc(100% - ${padding.left}px - ${padding.right}px`}
@@ -24,6 +35,7 @@ const ScaledSvg = ({ children, overflow = "visible" }: SvgProps) => {
           overflow: overflow,
         }}
       >
+        {title && <title>{title}</title>}
         {children}
       </svg>
     </>

package/lib/Svg/index.tsx

@@ -1,12 +1,13 @@
 import { type ReactNode } from "react";
 import { useReactCake } from "../ReactCake";
+import { LayoutProps } from "../types";
 
-interface SvgProps {
-  overflow?: "visible" | "hidden";
+interface SvgProps extends LayoutProps {
+  title?: string;
   children?: ReactNode;
 }
 
-const Svg = ({ children, overflow = "hidden" }: SvgProps) => {
+const Svg = ({ children, title, overflow = "hidden" }: SvgProps) => {
   const { padding } = useReactCake();
   return (
     <svg
@@ -24,6 +25,7 @@ const Svg = ({ children, overflow = "hidden" }: SvgProps) => {
         overflow: overflow,
       }}
     >
+      {title && <title>{title}</title>}
       <g transform={`translate(${padding.left} ${padding.top})`}>{children}</g>
     </svg>
   );

package/lib/types.ts

@@ -37,3 +37,10 @@ export interface ContextValue {
   zGet?: (d: unknown) => number | string;
   padding: Padding;
 }
+
+export interface LayoutProps {
+  overflow?: "hidden" | "visible",
+  label?: string;
+  labelledBy?: string;
+  describedBy?: string;
+}

package/notes.md

@@ -1 +1,11 @@
 - Anything you draw past the edges shows up in the padding, the way it does on the other layouts. (https://layercake.graphics/guide#canvas)
+
+from: https://layercake.graphics/guide
+
+- it reverses the default range from [0, height] to [height, 0] in order to match the DOM coordinate system and make drawing easier out of the box.
+- The default ranges for each dimension are:
+
+x: [0, width]
+y: [height, 0], unless using a scaleBand or scalePoint and it is [0, height]
+r: [1, 25]. The min is 1 and not zero because this is a scaleSqrt by default and 0 is not allowed in that type of chart.
+z: [0, width]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awesomephant/reactcake",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A headless chart framework for React inspired by Layercake",
   "keywords": [
     "react",

package/site/astro.config.mjs

@@ -1,5 +1,6 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
+import {transformerRenderIndentGuides, transformerRenderLineNumber} from "@shikijs/transformers"
 
 import mdx from '@astrojs/mdx';
 
@@ -7,9 +8,14 @@ import react from '@astrojs/react';
 
 export default defineConfig({
   markdown: {
-  shikiConfig: {
-    theme: 'github-light-high-contrast',
-    }
+    shikiConfig: {
+      theme: 'css-variables',
+      defaultColor: false,
+      transformers:[transformerRenderLineNumber(), transformerRenderIndentGuides()]
+    },
+    syntaxHighlight: {
+      type: 'shiki',
+  },
   },
 
   integrations: [mdx(), react()]

package/site/package.json

@@ -21,6 +21,7 @@
     "react-dom": "^19.3.1"
   },
   "devDependencies": {
+    "@shikijs/transformers": "^4.6.0",
     "@types/d3-scale": "^4.0.9",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0"

package/site/src/components/Example.astro

@@ -12,5 +12,6 @@ const {height, width = "100%"} = Astro.props
   .container {
     margin: 1rem 0;
     border: 1px solid var(--blue-50);
+    font-family: sans-serif;
   }
 </style>

package/site/src/examples/AxisX/{index.tsx → AxisX.tsx}

@@ -62,7 +62,7 @@ const AxisX = ({
             height: `${tickLength}px`,
           }}
         >
-          <span className={styles.tick_mark}></span>
+          <span style={{ height: `${tickLength}px` }} className={styles.tick__mark}></span>
           <span
             className={styles.tick__text}
             style={{

package/site/src/examples/AxisX/styles.module.css

@@ -6,7 +6,12 @@
 
 .tick {
   position: absolute;
+}
+
+.tick__mark {
   border-left: 1px solid var(--blue-50);
+  position: absolute;
+  transform: translateX(-50%);
 }
 
 .gridline {

package/site/src/examples/ColumnChart.tsx

@@ -1,9 +1,10 @@
 import { ReactCake, ScaledSvg, Html } from "../../../lib";
-import AxisX from "./AxisX/index";
+import AxisX from "./AxisX/AxisX";
 import AxisY from "./AxisY";
 import Columns from "./Columns";
 import { scaleLinear, scaleBand } from "d3-scale";
 import { max } from "d3-array";
+import DebugPadding from "./DebugPadding";
 
 const data = [
   { year: 2021, value: 18 },
@@ -29,7 +30,8 @@ export default function ColumnChart() {
       yDomain={[0, max(data, (d) => d[yKey]) + 5]}
       padding={{ top: 10, left: 35, right: 10, bottom: 30 }}
     >
-      <Html>
+      <Html overflow="visible">
+        <DebugPadding />
         <AxisX grid ticks />
         <AxisY grid ticks={3} />
       </Html>

package/site/src/examples/DebugPadding.tsx

@@ -0,0 +1,17 @@
+import { useReactCake } from "../../../lib";
+
+export default function DebugPadding() {
+  const { padding } = useReactCake();
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        boxShadow: `${padding.right}px 0 var(--blue-20), 0 ${padding.bottom}px  var(--blue-20), 0 ${-padding.top}px  var(--blue-20), -${padding.left}px 0  var(--blue-20)`,
+      }}
+    ></div>
+  );
+}

package/site/src/layouts/Base.astro

@@ -1,3 +1,7 @@
+---
+import "./code.css"
+---
+
 <!doctype html>
 <html lang="en">
 	<head>
@@ -24,12 +28,13 @@
 	body {
 		margin: 0;
 		width: 100%;
-		padding: 2rem 0;
-		font-family: sans-serif;
-		--blue-70: hsl(212, 70%, 26%);
-		--blue-50: hsl(212, 70%, 36%);
-		--blue-30: hsl(212, 50%, 76%);
-		--blue-10: hsl(212, 40%, 97%);
+		padding: .5rem;
+		font-family: Georgia, 'Times New Roman', Times, serif;
+		--blue-70: hsl(220, 0%, 20%);
+		--blue-50: hsl(220, 0%, 36%);
+		--blue-30: hsl(220, 0%, 76%);
+		--blue-20: hsl(220, 0%, 92%);
+		--blue-10: hsl(220, 0%, 97%);
 		--ms--1: .8rem
 	}
 
@@ -38,17 +43,23 @@
 	}
 
 	.content {
+	  border: 1px solid var(--blue-70);
 	  max-width: 40rem;
 	  line-height: 1.4;
-	  margin: 0 auto;
+		padding: 1rem;
+		border-right: 1px solid var(--blue-70);
 	}
 
 	p, li {
 	  letter-spacing: .002em;
 	}
 
+	h1 {
+	  font-weight: 900;
+	}
+
 	h2 {
-	  margin-top: 2rem;
+	  margin-top: 1rem;
 	  margin-bottom: .25rem;
 	}
 	h3 {
@@ -59,20 +70,13 @@
 
 	p, ul, ol {
 	  margin-bottom: 1rem;
+		&:last-child {
+			margin-bottom: 0;
+		}
 	}
 
 	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/layouts/code.css

@@ -0,0 +1,37 @@
+.astro-code {
+    --astro-code-background: hsl(51, 62.5%, 93.7%);
+    --astro-code-token-comment: #666;
+	  margin: 1em 0;
+		margin-top: .5em;
+		padding: .5em;
+		font-size: 12px;
+		line-height: 1.25;
+		font-family: monospace;
+	}
+
+
+pre.astro-code .indent {
+  display: inline-block;
+  position: relative;
+  left: var(--indent-offset);
+}
+
+pre.astro-code .indent:empty {
+  height: 1lh;
+  vertical-align: bottom;
+}
+
+pre.astro-code .indent::before {
+  content: '';
+  position: absolute;
+  opacity: 0.5;
+  width: 1px;
+  height: 100%;
+  background-color: red;
+}
+
+pre.astro-code .line-number {
+  user-select: none;
+  color: #666;
+  margin-right: 2ch;
+}

package/site/src/pages/index.mdx

@@ -17,13 +17,13 @@ A headless chart framework for React inspired by [Layercake](https://layercake.g
 ## Installation
 
 ```bash
-npm install --save reactcake
+npm install --save @awesomephant/reactcake
 ```
 
 ## Usage
 
 ```tsx
-import { ReactCake, Html, Svg } from "reactcake";
+import { ReactCake, Html, Svg } from "@awesomephant/reactcake";
 import { scaleLinear, scaleBand } from "d3-scale"
 
 // Chart components live in your project
@@ -35,9 +35,11 @@ const data = [
   {year: 2026, value: 52}
 ];
 
+// Use any d3 scale
 const xScale = scaleTime();
 const xScale = scaleBand();
 
+// Build charts declaratively
 return (
   <ReactCake data={data} x="year" y="value" xScale={xScale} yScale={yScale}>
     <Html>
@@ -61,7 +63,7 @@ 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.
+This project is an attempt to carefully 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