react-native-roster 0.0.0 → 0.0.1

package/src/components/layers/README.md

@@ -0,0 +1,11 @@
+# layers
+
+This area is about a layer; its children are intervals and gaps. Both
+projections draw the same fillers, so they live above Roster and Schedule.
+
+- Root entry exports: `RosterInterval`, `RosterGap`, `IntervalInput`, `GapInput`
+- `layers.types.ts`: the filler input contract both projections pass
+- `parts/interval.tsx`, `parts/gap.tsx`: the default fillers
+- `utils/styles.ts`: content-keyed style objects per layer
+
+Imports core only. Tests: `test/components/layers`.

package/src/components/layers/layers.types.ts

@@ -0,0 +1,6 @@
+import type { Lane, Layer, Rect } from '../../core';
+
+/** One covered span of a layer, positioned by the projection; `highlighted` follows the active source. */
+export type IntervalInput = { rect: Rect; layer: Layer; lane: Lane; highlighted: boolean };
+/** One removed span of a layer, positioned by the projection. */
+export type GapInput = { rect: Rect; layer: Layer; lane: Lane };

package/src/components/layers/parts/gap.tsx

@@ -0,0 +1,5 @@
+import type { GapInput } from '../layers.types';
+
+export function RosterGap(_input: GapInput) {
+  return null;
+}

package/src/components/layers/parts/interval.tsx

@@ -0,0 +1,24 @@
+import { View } from 'react-native';
+import type { IntervalInput } from '../layers.types';
+import { stylesFor } from '../utils/styles';
+
+export function RosterInterval({ rect, layer, highlighted }: IntervalInput) {
+  const styles = stylesFor(layer);
+  const fill = highlighted ? styles.highlighted : styles.normal;
+  return (
+    <View
+      pointerEvents="none"
+      style={[
+        fill,
+        {
+          position: 'absolute',
+          left: rect.x,
+          top: rect.y,
+          width: rect.width,
+          height: rect.height,
+          zIndex: rect.z,
+        },
+      ]}
+    />
+  );
+}

package/src/components/layers/utils/styles.ts

@@ -0,0 +1,24 @@
+import type { ViewStyle } from 'react-native';
+import type { Layer } from '../../../core';
+import { structuralKey } from '../../../core/hash';
+
+const styles = new Map<string, { normal: ViewStyle; highlighted: ViewStyle }>();
+
+export function stylesFor(layer: Layer): { normal: ViewStyle; highlighted: ViewStyle } {
+  const key = structuralKey([layer.id, layer.style]);
+  let result = styles.get(key);
+  if (!result) {
+    const normal: ViewStyle = {
+      backgroundColor: layer.style.color,
+      opacity: layer.style.opacity ?? 1,
+      width: '100%',
+      height: '100%',
+    };
+    result = {
+      normal,
+      highlighted: { ...normal, backgroundColor: layer.style.highlightColor ?? layer.style.color },
+    };
+    styles.set(key, result);
+  }
+  return result;
+}

package/src/components/primitives/README.md

@@ -0,0 +1,12 @@
+# primitives
+
+Hookless building blocks shared by Roster and Schedule. Nothing here is a
+public export.
+
+- `press-point.tsx`, `press-point.web.tsx`, `press-point.types.ts`: pointer
+  coordinates relative to the pressed surface; the web file is selected by the
+  `browser` remap in package.json
+- `region-style.ts`: `regionStyle(structure, paint, override)`, which drops the
+  default paint when the override carries a NativeWind class entry
+
+Tests: `test/components/primitives`.

package/src/components/primitives/press-point.tsx

@@ -0,0 +1,5 @@
+import type { PressPoint, PressPointInput } from './press-point.types';
+
+export function pressPoint({ nativeEvent }: PressPointInput): PressPoint {
+  return { x: nativeEvent.locationX as number, y: nativeEvent.locationY as number };
+}

package/src/components/primitives/press-point.types.ts

@@ -0,0 +1,5 @@
+export type PressPointInput = {
+  nativeEvent: { locationX?: number; locationY?: number; clientX?: number; clientY?: number };
+  currentTarget?: unknown;
+};
+export type PressPoint = { x: number; y: number };

package/src/components/primitives/press-point.web.tsx

@@ -0,0 +1,19 @@
+import type { PressPoint, PressPointInput } from './press-point.types';
+
+export function pressPoint({ nativeEvent, currentTarget }: PressPointInput): PressPoint {
+  // React Native Web passes a DOM click, not a native responder event, to onPress.
+  const target = currentTarget as {
+    getBoundingClientRect(): { left: number; top: number; width: number; height: number };
+  };
+  const bounds = target.getBoundingClientRect();
+  return {
+    x:
+      typeof nativeEvent.clientX === 'number'
+        ? nativeEvent.clientX - bounds.left
+        : bounds.width / 2,
+    y:
+      typeof nativeEvent.clientY === 'number'
+        ? nativeEvent.clientY - bounds.top
+        : bounds.height / 2,
+  };
+}

package/src/components/primitives/region-style.ts

@@ -0,0 +1,21 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/**
+ * Compose a chrome region's style. React Native Web renders object styles
+ * inline, and inline paint beats any class, so a class entry in the override
+ * (NativeWind's `$$css` marker) replaces the region's default paint entirely.
+ * Structure always applies; native style overrides simply merge last.
+ */
+export function regionStyle(
+  structure: ViewStyle,
+  paint: ViewStyle,
+  override: StyleProp<ViewStyle>,
+): StyleProp<ViewStyle> {
+  return [structure, hasClassEntry(override) ? null : paint, override];
+}
+
+function hasClassEntry(style: unknown): boolean {
+  if (!style || typeof style !== 'object') return false;
+  if (Array.isArray(style)) return style.some((entry) => hasClassEntry(entry));
+  return '$$css' in style;
+}

package/src/components/roster/README.md

@@ -0,0 +1,18 @@
+# Roster
+
+This feature is about a roster; its children are lanes.
+
+- Root entry exports: `Roster`, `useRoster`, the `RosterXxx` parts, and every
+  `XxxInput` zone type from `roster.types.ts`
+
+- `index.tsx`: the chassis; calls `useRoster`, branches on `status`, composes zones
+- `use-roster.ts`: the hook; owns window, projection, scroll, geometry, and press
+- `layout.tsx`: arranges corner, header, label column, and body regions only
+- `roster.types.ts`: props, model, and every zone input type
+- `parts/`: collection-level parts (body, header, header cell, grid, corner, label column, empty)
+- `lanes/`: `LaneRow`, the interval-hover platform pair, and lane-local parts
+- `utils/`: ticks and the body content key
+
+Interval and gap fillers live in `../layers`; press geometry and `regionStyle`
+in `../primitives`. Zone contracts are documented in the README's Roster zones
+section and in `llms.txt`. Tests: `test/components/roster`.

package/src/components/roster/index.tsx

@@ -0,0 +1,90 @@
+import { RosterGap } from '../layers/parts/gap';
+import { RosterInterval } from '../layers/parts/interval';
+import { RosterLaneLabel } from './lanes/parts/lane-label';
+import { RosterLayout } from './layout';
+import { RosterBody } from './parts/body';
+import { RosterCorner } from './parts/corner';
+import { RosterEmpty } from './parts/empty';
+import { RosterGrid } from './parts/grid';
+import { RosterHeader } from './parts/header';
+import { RosterHeaderCell } from './parts/header-cell';
+import { RosterLaneLabelColumn } from './parts/lane-label-column';
+import type { RosterProps } from './roster.types';
+import { useRoster } from './use-roster';
+
+export function Roster(props: RosterProps) {
+  const {
+    status,
+    orderedLanes,
+    laneState,
+    window,
+    geometryFor,
+    projection,
+    scroll,
+    press,
+    ticks,
+    contentWidth,
+    viewport,
+    onLayout,
+  } = useRoster(props);
+  const {
+    emptyZone = RosterEmpty,
+    cornerZone = RosterCorner,
+    headerZone = RosterHeader,
+    laneLabelColumnZone = RosterLaneLabelColumn,
+    bodyZone = RosterBody,
+    headerCellZone = RosterHeaderCell,
+    laneLabelZone = RosterLaneLabel,
+    intervalZone = RosterInterval,
+    gapZone = RosterGap,
+    gridZone = RosterGrid,
+    incompleteLabel = 'Availability may be incomplete',
+    neverSetLabel = 'No availability set',
+  } = props;
+  if (status === 'empty') return emptyZone();
+  if (window.start === window.end) return null;
+  return (
+    <RosterLayout
+      style={props.style}
+      headerStyle={props.headerStyle}
+      laneLabelColumnStyle={props.laneLabelColumnStyle}
+      bodyStyle={props.bodyStyle}
+      laneLabelWidth={props.laneLabelWidth}
+      onLayout={onLayout}
+      cornerZone={cornerZone()}
+      headerZone={headerZone({ ticks, projection, scroll, contentWidth, headerCellZone })}
+      laneLabelColumnZone={laneLabelColumnZone({
+        labels: orderedLanes.map((lane) => {
+          const state = laneState.get(lane.id) ?? { flag: 'none', complete: true };
+          return {
+            lane,
+            ...state,
+            viewTimezone: projection.viewTimezone,
+            incompleteLabel,
+            neverSetLabel,
+          };
+        }),
+        projection,
+        scroll,
+        laneLabelZone,
+      })}
+      bodyZone={bodyZone({
+        lanes: orderedLanes,
+        window,
+        geometryFor,
+        projection,
+        scroll,
+        press,
+        ticks,
+        contentWidth,
+        viewport,
+        intervalZone,
+        gapZone,
+        gridZone,
+        highlightSource: props.highlightSource,
+        onIntervalHover: props.onIntervalHover,
+        incompleteLabel,
+      })}
+    />
+  );
+}

package/src/components/roster/lanes/interval-hover.tsx

@@ -0,0 +1,5 @@
+import type { IntervalHoverInput, IntervalHoverProps } from './interval-hover.types';
+
+export function intervalHoverProps(_input: IntervalHoverInput): IntervalHoverProps {
+  return {};
+}

package/src/components/roster/lanes/interval-hover.types.ts

@@ -0,0 +1,11 @@
+import type { Lane, LaneGeometry, Rect } from '../../../core';
+import type { PressPointInput } from '../../primitives/press-point.types';
+
+export type IntervalHoverInput = {
+  lane: Lane;
+  geometry: LaneGeometry;
+  onIntervalHover?: (rect: Rect, lane: Lane) => void;
+};
+export type IntervalHoverProps = {
+  onPointerMove?: (input: PressPointInput & { nativeEvent: { pointerType?: string } }) => void;
+};

package/src/components/roster/lanes/interval-hover.web.tsx

@@ -0,0 +1,19 @@
+import { hitTest } from '../../../core/hit-test';
+import { pressPoint } from '../../primitives/press-point.web';
+import type { IntervalHoverInput, IntervalHoverProps } from './interval-hover.types';
+
+export function intervalHoverProps({
+  lane,
+  geometry,
+  onIntervalHover,
+}: IntervalHoverInput): IntervalHoverProps {
+  if (!onIntervalHover) return {};
+  return {
+    onPointerMove(input) {
+      if (input.nativeEvent.pointerType === 'touch') return;
+      const { x, y } = pressPoint(input);
+      const hit = hitTest(lane, geometry, x, y);
+      if (hit?.kind === 'interval') onIntervalHover(hit.rect, lane);
+    },
+  };
+}

package/src/components/roster/lanes/lane.tsx

@@ -0,0 +1,88 @@
+import { Fragment } from 'react';
+import { Pressable } from 'react-native';
+import type { Lane, LaneGeometry } from '../../../core';
+import { pressPoint } from '../../primitives/press-point';
+import type { BodyInput } from '../roster.types';
+import { intervalHoverProps } from './interval-hover';
+import { RosterIncomplete } from './parts/incomplete';
+
+export type LaneRowProps = Pick<
+  BodyInput,
+  'press' | 'intervalZone' | 'gapZone' | 'highlightSource' | 'onIntervalHover' | 'incompleteLabel'
+> & {
+  lane: Lane;
+  geometry: LaneGeometry;
+  width: number;
+  rowHeight: number;
+};
+
+export function LaneRow({
+  lane,
+  geometry,
+  width,
+  rowHeight,
+  press,
+  intervalZone,
+  gapZone,
+  highlightSource,
+  onIntervalHover,
+  incompleteLabel = 'Availability may be incomplete',
+}: LaneRowProps) {
+  const layers = [...lane.layers].sort((a, b) => a.z - b.z);
+  return (
+    <Pressable
+      {...intervalHoverProps({ lane, geometry, onIntervalHover })}
+      testID={`roster-lane-${lane.id}`}
+      accessibilityLabel={lane.label}
+      onPress={(input) => {
+        const point = pressPoint(input);
+        press(lane, point.x, point.y);
+      }}
+      style={{ width, height: rowHeight }}
+    >
+      <RosterIncomplete lane={lane} geometry={geometry} width={width} label={incompleteLabel} />
+      {layers.map((layer) => (
+        <Fragment key={layer.id}>
+          {geometry.rects
+            .filter((rect) => rect.layerId === layer.id)
+            .map((rect) => (
+              <Fragment key={`interval-${rect.x}:${rect.width}`}>
+                {intervalZone({
+                  rect,
+                  layer,
+                  lane,
+                  highlighted: rect.sources.some(
+                    (source) =>
+                      source.kind === highlightSource?.kind && source.id === highlightSource.id,
+                  ),
+                })}
+              </Fragment>
+            ))}
+          {geometry.gapRects
+            .filter((rect) => rect.layerId === layer.id)
+            .map((rect) => (
+              <Pressable
+                key={`gap-${rect.x}:${rect.width}`}
+                accessibilityLabel={`${lane.label}: removed time`}
+                onPress={(input) => {
+                  input.stopPropagation();
+                  const point = pressPoint(input);
+                  press(lane, rect.x + point.x, rect.y + point.y);
+                }}
+                style={{
+                  position: 'absolute',
+                  left: rect.x,
+                  top: rect.y,
+                  width: rect.width,
+                  height: rect.height,
+                  zIndex: rect.z,
+                }}
+              >
+                {gapZone({ rect, layer, lane })}
+              </Pressable>
+            ))}
+        </Fragment>
+      ))}
+    </Pressable>
+  );
+}

package/src/components/roster/lanes/parts/incomplete.tsx

@@ -0,0 +1,44 @@
+import { Text } from 'react-native';
+import type { Lane, LaneGeometry } from '../../../../core';
+
+export function RosterIncomplete({
+  lane,
+  geometry,
+  width,
+  label,
+}: {
+  lane: Lane;
+  geometry: LaneGeometry;
+  width: number;
+  label: string;
+}) {
+  if (lane.complete !== false) return null;
+  // Choose the first empty span; the notice never covers an interval.
+  let left = 0;
+  let right = width;
+  for (const rect of [...geometry.rects].sort((a, b) => a.x - b.x)) {
+    if (rect.x > left) {
+      right = rect.x;
+      break;
+    }
+    left = Math.max(left, rect.x + rect.width);
+  }
+  if (left >= right) return null;
+  return (
+    <Text
+      testID={`roster-incomplete-${lane.id}`}
+      pointerEvents="none"
+      numberOfLines={1}
+      style={{
+        position: 'absolute',
+        left,
+        width: right - left,
+        top: 4,
+        color: '#64748b',
+        fontSize: 12,
+      }}
+    >
+      {label}
+    </Text>
+  );
+}

package/src/components/roster/lanes/parts/lane-label.tsx

@@ -0,0 +1,41 @@
+import { Text, View } from 'react-native';
+import type { LaneLabelInput } from '../../roster.types';
+
+export function RosterLaneLabel({
+  lane,
+  flag,
+  complete,
+  viewTimezone,
+  incompleteLabel,
+  neverSetLabel,
+}: LaneLabelInput) {
+  const zone =
+    lane.timezone && lane.timezone !== viewTimezone ? (
+      <Text style={{ fontSize: 10, color: '#64748b' }}>{lane.timezone}</Text>
+    ) : null;
+  const flagText =
+    flag === 'never-set' ? (
+      <Text style={{ fontSize: 10, color: '#9a3412' }}>{neverSetLabel}</Text>
+    ) : null;
+  const completeness = complete ? null : (
+    <Text style={{ fontSize: 10, color: '#9a3412' }}>{incompleteLabel}</Text>
+  );
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        paddingHorizontal: 8,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e2e8f0',
+      }}
+    >
+      <Text numberOfLines={1} style={{ color: '#0f172a', fontSize: 12 }}>
+        {lane.label}
+      </Text>
+      {zone}
+      {flagText}
+      {completeness}
+    </View>
+  );
+}

package/src/components/roster/layout.tsx

@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import { View } from 'react-native';
+import { regionStyle } from '../primitives/region-style';
+import type { RosterStyleProps } from './roster.types';
+
+type RosterLayoutProps = Omit<RosterStyleProps, `${string}ClassName` | 'className'> & {
+  /** Cell above the lane labels, beside the header. */
+  cornerZone: ReactNode;
+  /** Frozen tick row; the layout clips translated header content. */
+  headerZone: ReactNode;
+  /** Frozen lane labels; the layout supplies the label column and clips vertical translation. */
+  laneLabelColumnZone: ReactNode;
+  /** Virtualized body with its horizontal scroller; fills the measured viewport. */
+  bodyZone: ReactNode;
+  onLayout: (input: LayoutChangeEvent) => void;
+};
+
+export function RosterLayout({
+  cornerZone,
+  headerZone,
+  laneLabelColumnZone,
+  bodyZone,
+  onLayout,
+  style,
+  headerStyle,
+  laneLabelColumnStyle,
+  bodyStyle,
+  laneLabelWidth = 180,
+}: RosterLayoutProps) {
+  return (
+    <View style={regionStyle(structure.root, paint.root, style)}>
+      <View style={regionStyle(structure.header, paint.header, headerStyle)}>
+        <View style={{ width: laneLabelWidth }}>{cornerZone}</View>
+        <View style={structure.headerStrip}>{headerZone}</View>
+      </View>
+      <View style={structure.content}>
+        <View
+          style={regionStyle(
+            { ...structure.labels, width: laneLabelWidth },
+            paint.labels,
+            laneLabelColumnStyle,
+          )}
+        >
+          {laneLabelColumnZone}
+        </View>
+        <View onLayout={onLayout} style={regionStyle(structure.body, {}, bodyStyle)}>
+          {bodyZone}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const structure = {
+  root: { flex: 1, minHeight: 0, overflow: 'hidden' },
+  header: { flexDirection: 'row', height: 40, overflow: 'hidden' },
+  headerStrip: { flex: 1, minWidth: 0, overflow: 'hidden' },
+  content: { flex: 1, minHeight: 0, flexDirection: 'row' },
+  labels: { overflow: 'hidden' },
+  body: { flex: 1, minWidth: 0, overflow: 'hidden' },
+} as const;
+// Paint is what a class replaces; see regionStyle.
+const paint = {
+  root: { backgroundColor: '#fff' },
+  header: { borderBottomWidth: 1, borderBottomColor: '#cbd5e1' },
+  labels: { borderRightWidth: 1, borderRightColor: '#cbd5e1' },
+} as const;

package/src/components/roster/parts/body.tsx

@@ -0,0 +1,91 @@
+import { LegendList } from '@legendapp/list';
+import { Profiler, type ProfilerOnRenderCallback } from 'react';
+import { ScrollView, View } from 'react-native';
+import { LaneRow } from '../lanes/lane';
+import type { BodyInput } from '../roster.types';
+import { bodyContentKey } from '../utils/body-content-key';
+
+export function RosterBody({
+  lanes,
+  geometryFor,
+  projection,
+  scroll,
+  press,
+  ticks,
+  contentWidth,
+  viewport,
+  window,
+  intervalZone,
+  gapZone,
+  gridZone,
+  highlightSource,
+  onIntervalHover,
+  incompleteLabel,
+  onRowRender,
+}: BodyInput & {
+  /** Optional per-lane commit observer; used by the development gallery's Profiler gate. */
+  onRowRender?: ProfilerOnRenderCallback;
+}) {
+  // LegendList requires a measured viewport and does not support static rendering.
+  if (viewport.width <= 0 || viewport.height <= 0) return null;
+  return (
+    <ScrollView
+      testID="roster-horizontal-scroll"
+      ref={scroll.bodyRef}
+      horizontal
+      onScroll={scroll.onBodyScroll}
+      scrollEventThrottle={16}
+      style={{ flex: 1 }}
+    >
+      <View style={{ width: contentWidth, height: viewport.height }}>
+        {gridZone({ ticks, contentWidth })}
+        <LegendList
+          testID="roster-vertical-scroll"
+          data={lanes}
+          extraData={bodyContentKey({
+            window,
+            projection,
+            highlightSource,
+            intervalZone,
+            gapZone,
+            onIntervalHover,
+            incompleteLabel,
+          })}
+          keyExtractor={(lane) => lane.id}
+          estimatedListSize={{ width: contentWidth, height: viewport.height }}
+          estimatedItemSize={projection.rowHeight}
+          getFixedItemSize={() => projection.rowHeight}
+          drawDistance={0}
+          recycleItems={false}
+          maintainVisibleContentPosition={false}
+          onScroll={scroll.onVerticalScroll}
+          scrollEventThrottle={16}
+          style={{ flex: 1 }}
+          renderItem={({ item }) => {
+            const row = (
+              <LaneRow
+                lane={item}
+                geometry={geometryFor(item)}
+                width={contentWidth}
+                rowHeight={projection.rowHeight}
+                press={press}
+                intervalZone={intervalZone}
+                gapZone={gapZone}
+                highlightSource={highlightSource}
+                onIntervalHover={onIntervalHover}
+                incompleteLabel={incompleteLabel}
+              />
+            );
+            if (onRowRender)
+              return (
+                <Profiler id={item.id} onRender={onRowRender}>
+                  {row}
+                </Profiler>
+              );
+            return row;
+          }}
+        />
+      </View>
+    </ScrollView>
+  );
+}

package/src/components/roster/parts/corner.tsx

@@ -0,0 +1,3 @@
+export function RosterCorner() {
+  return null;
+}

package/src/components/roster/parts/empty.tsx

@@ -0,0 +1,5 @@
+import { Text } from 'react-native';
+
+export function RosterEmpty() {
+  return <Text style={{ padding: 24, color: '#475569' }}>No lanes</Text>;
+}

package/src/components/roster/parts/grid.tsx

@@ -0,0 +1,26 @@
+import { View } from 'react-native';
+import type { GridInput } from '../roster.types';
+
+export function RosterGrid({ ticks, contentWidth }: GridInput) {
+  return (
+    <View
+      testID="roster-grid"
+      pointerEvents="none"
+      style={{ position: 'absolute', width: contentWidth, height: '100%' }}
+    >
+      {ticks.map((tick) => (
+        <View
+          key={tick.time}
+          style={{
+            position: 'absolute',
+            left: tick.x,
+            top: 0,
+            bottom: 0,
+            width: 1,
+            backgroundColor: '#e2e8f0',
+          }}
+        />
+      ))}
+    </View>
+  );
+}