@react-x11/components 0.1.0 → 0.2.1

package/src/charts/hx.ts

@@ -0,0 +1,39 @@
+// `React.createElement`, typed against react-x11's host elements — a copy
+// of `src/calendar/hx.ts`, and deliberately a copy: a component importing
+// another component's private module makes the two one unit for a bundler
+// (AGENTS.md, "No component imports another component").
+//
+// `React.createElement`'s own overloads are `@types/react`'s and describe
+// the DOM, so a `<box onMouseMove>` handler would be checked against
+// React's MouseEvent rather than react-x11's. `hx('box', …)` looks the
+// name up in react-x11's element table instead, and `hx('div', …)` is an
+// error.
+import React from 'react';
+import type { Key, ReactElement, ReactNode, Ref } from 'react';
+import type { ReactX11Elements, Theme } from 'react-x11';
+
+/** The host elements, by name. */
+export type Host = ReactX11Elements;
+
+/**
+ * What every element takes on top of its own props. `theme` is honoured by
+ * every node at runtime; react-x11's declarations only put it on
+ * `<window>`, so it is re-declared here the way the calendar does.
+ * `data-testname` is the query hook every component forwards
+ * (docs/README.md, "Conventions"); react-x11 passes `data-*` through, the
+ * declarations just do not spell it.
+ */
+interface CommonProps {
+  key?: Key;
+  ref?: Ref<unknown>;
+  theme?: Theme | Record<string, string | number>;
+  'data-testname'?: string;
+}
+
+export function hx<K extends keyof Host>(
+  type: K,
+  props?: (Omit<Host[K], 'theme'> & CommonProps) | null,
+  ...children: ReactNode[]
+): ReactElement {
+  return React.createElement(type as string, props as never, ...children);
+}

package/src/charts/index.ts

@@ -0,0 +1,99 @@
+// Charts — shadcn-shaped composition over one registered element that
+// paints with cost bounded by pixels, not points. `docs/prd-charts.md` is
+// the design record; the pieces:
+//
+//  - `data.ts` — column resolution, the streaming `ChartData` store, the
+//    min/max pyramid and x-index (pure, display-free);
+//  - `scale.ts` — linear/band scales, nice/time ticks (pure);
+//  - `render.ts` — the series renderers and the command-vs-pixels policy;
+//  - `node.ts` — the `<chartplot>` retained node: one paint pass for grid,
+//    axes and series, plus the tooltip's hit answers;
+//  - `components.ts` — `ChartContainer`, the chart wrappers and the
+//    config-carrier children.
+//
+// **Registration happens when this module is evaluated** — the one side
+// effect tree-shaking relies on being here and nowhere shallower (AGENTS.md,
+// "Tree-shaking is a constraint, not a nice-to-have").
+import { registerElement, registeredElements } from 'react-x11/host';
+
+// Loads the module the JSX augmentation below targets; nothing in `src/`
+// writes JSX, so without this the build never resolves the module being
+// augmented. Type-only, erased, costs no bundle.
+import type {} from 'react-x11/jsx-runtime';
+
+import { ChartPlotNode, ELEMENT } from './node.js';
+import type { ChartPlotProps } from './node.js';
+
+// Idempotent on purpose: `registerElement` throws on a second registration
+// without `override`, which is right for two packages fighting over a name —
+// but two copies of this one (a lockfile skew) should not fail to boot over
+// a name both of them mean the same thing by.
+if (!registeredElements().includes(ELEMENT)) {
+  registerElement(ELEMENT, {
+    create: (props, app) => new ChartPlotNode(props, app),
+    // `data` and `spec` are not style names today, but `color`-adjacent
+    // vocabulary has drifted into styles before; declaring everything the
+    // element reads keeps a future style name from turning these props
+    // into DEV throws (AGENTS.md, "Gotchas").
+    semanticNames: ['spec', 'data', 'formatters'],
+    childrenAllowed: false,
+  });
+}
+
+export {
+  ChartContainer,
+  LineChart,
+  AreaChart,
+  BarChart,
+  ScatterChart,
+  LineSeries,
+  AreaSeries,
+  BarSeries,
+  ScatterSeries,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  ChartTooltip,
+  ChartLegend,
+} from './components.js';
+export type {
+  ChartContainerProps,
+  CartesianChartProps,
+  ChartPlotHandle,
+  SeriesProps,
+  XAxisProps,
+  YAxisProps,
+  CartesianGridProps,
+  ChartTooltipProps,
+  ChartLegendProps,
+  TooltipData,
+} from './components.js';
+
+export { ChartData, isChartDataLike } from './data.js';
+export type {
+  ChartDataOptions,
+  ChartDataChange,
+  ChartDataLike,
+  ChartRow,
+  ColumnarData,
+  ChartSourceData,
+} from './data.js';
+
+export type { ChartConfig, ChartFrameStats } from './spec.js';
+export type { ChartPlotProps, ChartHit, ChartFormatters } from './node.js';
+
+/** The host element name, for apps that would rather write `<chartplot>`. */
+export { ELEMENT as CHARTPLOT_ELEMENT };
+
+// Importing any chart component teaches JSX the element too — the module
+// augmentation shape react-x11's docs/typescript.md prescribes.
+declare module 'react-x11/jsx-runtime' {
+  namespace JSX {
+    interface IntrinsicElements {
+      chartplot: ChartPlotProps & {
+        onMouseMove?: (ev: { x: number; y: number }) => void;
+        onMouseLeave?: (ev: { x: number; y: number }) => void;
+      };
+    }
+  }
+}