react-native-roster 0.0.1 → 0.2.0

package/src/components/schedule/days/day.tsx

@@ -7,7 +7,14 @@ import { transitionBounds } from '../utils/days';
 import { ScheduleDayLayout } from './layout';
 
 type ScheduleDayZones = Required<
-  Pick<ScheduleProps, 'gridZone' | 'columnZone' | 'transitionZone' | 'intervalZone' | 'gapZone'>
+  Pick<
+    ScheduleProps,
+    | 'gridComponent'
+    | 'columnComponent'
+    | 'transitionComponent'
+    | 'intervalComponent'
+    | 'gapComponent'
+  >
 >;
 
 type ScheduleDayProps = ScheduleDayZones & {
@@ -33,11 +40,11 @@ export function ScheduleDay({
   highlightSource,
   hours,
   press,
-  gridZone,
-  columnZone,
-  transitionZone,
-  intervalZone,
-  gapZone,
+  gridComponent: GridComponent,
+  columnComponent: ColumnComponent,
+  transitionComponent: TransitionComponent,
+  intervalComponent,
+  gapComponent,
   nowLineZone,
 }: ScheduleDayProps) {
   return (
@@ -53,20 +60,26 @@ export function ScheduleDay({
         width={projection.columnWidth}
         height={24 * projection.pxPerHour}
         chromeZ={Math.max(0, ...lane.layers.map((layer) => layer.z)) + 1}
-        gridZone={gridZone({ hours, pxPerHour: projection.pxPerHour })}
-        columnZone={columnZone({
-          day,
-          lane,
-          rects: geometry.rects.filter((rect) => rect.column === column),
-          gapRects: geometry.gapRects.filter((rect) => rect.column === column),
-          highlightSource,
-          intervalZone,
-          gapZone,
-          press,
-        })}
+        gridZone={<GridComponent hours={hours} pxPerHour={projection.pxPerHour} />}
+        columnZone={
+          <ColumnComponent
+            day={day}
+            lane={lane}
+            rects={geometry.rects.filter((rect) => rect.column === column)}
+            gapRects={geometry.gapRects.filter((rect) => rect.column === column)}
+            highlightSource={highlightSource}
+            intervalComponent={intervalComponent}
+            gapComponent={gapComponent}
+            press={press}
+          />
+        }
         transitionZone={day.transitions.map((transition) => (
           <Fragment key={transition.at}>
-            {transitionZone({ day, transition, ...transitionBounds(day, transition, projection) })}
+            <TransitionComponent
+              day={day}
+              transition={transition}
+              {...transitionBounds(day, transition, projection)}
+            />
           </Fragment>
         ))}
         nowLineZone={nowLineZone}

package/src/components/schedule/days/header-layout.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 
 type ScheduleDayHeaderLayoutProps = {
   width: number;
-  /** Day heading supplied by dayHeaderZone, aligned with its column. */
+  /** Day heading supplied by dayHeaderComponent, aligned with its column. */
   headerZone: ReactNode;
 };
 

package/src/components/schedule/days/parts/column.tsx

@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
 import { Pressable } from 'react-native';
+import { hasSource } from '../../../../core';
 import { pressPoint } from '../../../primitives/press-point';
 import type { ScheduleColumnInput } from '../../schedule.types';
 
@@ -8,8 +9,8 @@ export function ScheduleColumn({
   rects,
   gapRects,
   press,
-  intervalZone,
-  gapZone,
+  intervalComponent: IntervalComponent,
+  gapComponent: GapComponent,
   highlightSource,
 }: ScheduleColumnInput) {
   return [...lane.layers]
@@ -20,15 +21,12 @@ export function ScheduleColumn({
           .filter((rect) => rect.layerId === layer.id)
           .map((rect) => (
             <Fragment key={`interval-${rect.y}:${rect.height}`}>
-              {intervalZone({
-                rect,
-                layer,
-                lane,
-                highlighted: rect.sources.some(
-                  (source) =>
-                    source.kind === highlightSource?.kind && source.id === highlightSource.id,
-                ),
-              })}
+              <IntervalComponent
+                rect={rect}
+                layer={layer}
+                lane={lane}
+                highlighted={hasSource(rect.sources, highlightSource)}
+              />
             </Fragment>
           ))}
         {gapRects
@@ -51,7 +49,7 @@ export function ScheduleColumn({
                 zIndex: rect.z,
               }}
             >
-              {gapZone({ rect, layer, lane })}
+              <GapComponent rect={rect} layer={layer} lane={lane} />
             </Pressable>
           ))}
       </Fragment>

package/src/components/schedule/index.tsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { View } from 'react-native';
 import { RosterGap } from '../layers/parts/gap';
 import { RosterInterval } from '../layers/parts/interval';
@@ -50,40 +49,40 @@ function ScheduleContent(props: ScheduleProps) {
     lane,
     windowSpec,
     highlightSource,
-    gutterZone = ScheduleGutter,
-    dayHeaderZone = ScheduleDayHeader,
-    skippedDateZone = ScheduleSkippedDate,
-    columnZone = ScheduleColumn,
-    gridZone = ScheduleGrid,
-    transitionZone = ScheduleTransition,
-    nowLineZone = ScheduleNowLine,
-    intervalZone = RosterInterval,
-    gapZone = RosterGap,
-    incompleteZone = ScheduleIncomplete,
+    gutterComponent: GutterComponent = ScheduleGutter,
+    dayHeaderComponent: DayHeaderComponent = ScheduleDayHeader,
+    skippedDateComponent: SkippedDateComponent = ScheduleSkippedDate,
+    columnComponent = ScheduleColumn,
+    gridComponent = ScheduleGrid,
+    transitionComponent = ScheduleTransition,
+    nowLineComponent: NowLineComponent = ScheduleNowLine,
+    intervalComponent = RosterInterval,
+    gapComponent = RosterGap,
+    incompleteComponent: IncompleteComponent = ScheduleIncomplete,
     incompleteLabel = 'Availability may be incomplete',
   } = props;
   const position = nowPosition(projection, now);
   const incomplete =
-    lane.complete === false ? incompleteZone({ lane, label: incompleteLabel }) : null;
+    lane.complete === false ? <IncompleteComponent lane={lane} label={incompleteLabel} /> : null;
   return (
     <ScheduleLayout
       headerStyle={props.headerStyle}
       gutterStyle={props.gutterStyle}
       daysStyle={props.daysStyle}
       incompleteZone={incomplete}
-      gutterZone={gutterZone({ hours, pxPerHour: projection.pxPerHour })}
+      gutterZone={<GutterComponent hours={hours} pxPerHour={projection.pxPerHour} />}
       dayHeaderZone={headerDates(windowSpec, days).map(({ localDate, day }) => {
-        if (!day) return <Fragment key={localDate}>{skippedDateZone({ localDate })}</Fragment>;
+        if (!day) return <SkippedDateComponent key={localDate} localDate={localDate} />;
         return (
           <ScheduleDayHeaderLayout
             key={localDate}
             width={projection.columnWidth}
-            headerZone={dayHeaderZone({ day })}
+            headerZone={<DayHeaderComponent day={day} />}
           />
         );
       })}
       daysZone={days.map((day, column) => {
-        const nowLine = position?.column === column ? nowLineZone(position) : null;
+        const nowLine = position?.column === column ? <NowLineComponent {...position} /> : null;
         return (
           <ScheduleDay
             key={day.localDate}
@@ -95,11 +94,11 @@ function ScheduleContent(props: ScheduleProps) {
             highlightSource={highlightSource}
             hours={hours}
             press={(x, y) => press(column, x, y)}
-            gridZone={gridZone}
-            columnZone={columnZone}
-            transitionZone={transitionZone}
-            intervalZone={intervalZone}
-            gapZone={gapZone}
+            gridComponent={gridComponent}
+            columnComponent={columnComponent}
+            transitionComponent={transitionComponent}
+            intervalComponent={intervalComponent}
+            gapComponent={gapComponent}
             nowLineZone={nowLine}
           />
         );

package/src/components/schedule/schedule.types.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ComponentType } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type {
   DayColumn,
@@ -53,9 +53,9 @@ export type ScheduleColumnInput = {
   highlightSource?: Source;
   press: (x: number, y: number) => void;
   /** Covered rect filler shared with Roster; final bounds and stacking belong to the rect. */
-  intervalZone: (input: IntervalInput) => ReactNode;
+  intervalComponent: ComponentType<IntervalInput>;
   /** Removed rect content shared with Roster; the column supplies its pressable bounds. */
-  gapZone: (input: GapInput) => ReactNode;
+  gapComponent: ComponentType<GapInput>;
 };
 export type ScheduleHoursInput = { hours: number[]; pxPerHour: number };
 /**
@@ -81,23 +81,23 @@ export type ScheduleProps = ScheduleInput &
   ScheduleStyleProps & {
     incompleteLabel?: string;
     /** Frozen left hour labels; ScheduleGutter receives hours 0 through 23 and their scale. */
-    gutterZone?: (input: ScheduleHoursInput) => ReactNode;
+    gutterComponent?: ComponentType<ScheduleHoursInput>;
     /** Hour bands behind each day's rects; ScheduleGrid draws 24 bordered bands. */
-    gridZone?: (input: ScheduleHoursInput) => ReactNode;
+    gridComponent?: ComponentType<ScheduleHoursInput>;
     /** Frozen day heading; ScheduleDayHeader shows weekday, localDate, and a transition badge. */
-    dayHeaderZone?: (input: { day: DayColumn }) => ReactNode;
+    dayHeaderComponent?: ComponentType<{ day: DayColumn }>;
     /** Wholly skipped local date marker; ScheduleSkippedDate labels its zero-width header gap. */
-    skippedDateZone?: (input: { localDate: string }) => ReactNode;
+    skippedDateComponent?: ComponentType<{ localDate: string }>;
     /** The day's covered and removed rects; ScheduleColumn draws final bounds in layer order. */
-    columnZone?: (input: ScheduleColumnInput) => ReactNode;
+    columnComponent?: ComponentType<ScheduleColumnInput>;
     /** Transition chrome only; ScheduleTransition hatches skips and divides repeats with again. */
-    transitionZone?: (input: ScheduleTransitionInput) => ReactNode;
+    transitionComponent?: ComponentType<ScheduleTransitionInput>;
     /** Current day's line at y; ScheduleNowLine spans the containing column. */
-    nowLineZone?: (input: { y: number; column: number }) => ReactNode;
+    nowLineComponent?: ComponentType<{ y: number; column: number }>;
     /** Covered rect filler shared with Roster; position using rect bounds and use pointerEvents="none". */
-    intervalZone?: (input: IntervalInput) => ReactNode;
+    intervalComponent?: ComponentType<IntervalInput>;
     /** Removed rect content shared with Roster; ScheduleColumn supplies the invisible pressable. */
-    gapZone?: (input: GapInput) => ReactNode;
+    gapComponent?: ComponentType<GapInput>;
     /** Completeness notice in reserved empty space above the day grid; receives the lane and localized label. */
-    incompleteZone?: (input: { lane: Lane; label: string }) => ReactNode;
+    incompleteComponent?: ComponentType<{ lane: Lane; label: string }>;
   };

package/src/core/README.md

@@ -13,6 +13,7 @@ no React Native, no dependencies.
 | `axis.ts` | window specs, spans, and navigation (`windowFor`, `next`, `prev`, `today`) |
 | `layout.ts` | rect geometry for one lane in either projection |
 | `coverage.ts` | covered and removed minutes per lane |
+| `source.ts` | `hasSource(sources, source)` matches kind and id, ignoring labels |
 | `spans.ts` | the provenance sweep: exact sources per merged span |
 | `columns.ts` | day columns, transitions, and skipped dates for the columns projection |
 | `zone.ts` | Intl-only timezone math (offsets, first instants, transitions) |
@@ -23,3 +24,6 @@ no React Native, no dependencies.
 
 Reference: [design](../../docs/design.md), [timezones](../../docs/timezones.md),
 [caches](../../docs/caches.md). Tests: `test/core`.
+
+The public entry binds immutable function aliases directly to preserve implementation
+identity while avoiding repeated CommonJS getter wrappers in consumer bundles.

package/src/core/index.ts

@@ -14,6 +14,7 @@ export { layoutLane } from './layout';
 export type { LaneComparator } from './order';
 export { byCoverage, byLabel } from './order';
 export { snapToStep, timeAtX, timeAtY } from './snap';
+export { hasSource } from './source';
 export type {
   Coverage,
   DayColumn,

package/src/core/source.ts

@@ -0,0 +1,9 @@
+import type { Source } from './types';
+
+/** Match source identity by kind and id, ignoring display metadata. */
+export function hasSource(sources: readonly Source[], source: Source | undefined): boolean {
+  return (
+    source !== undefined &&
+    sources.some((item) => item.kind === source.kind && item.id === source.id)
+  );
+}

package/src/index.ts

@@ -1,7 +1,9 @@
 export type { GapInput, IntervalInput } from './components/layers/layers.types';
 export { RosterGap } from './components/layers/parts/gap';
 export { RosterInterval } from './components/layers/parts/interval';
+export { Portal, PortalHost } from './components/primitives/portal';
 export { Roster } from './components/roster';
+export { RosterBodyLayout } from './components/roster/body-layout';
 export { RosterLaneLabel } from './components/roster/lanes/parts/lane-label';
 export { RosterBody } from './components/roster/parts/body';
 export { RosterCorner } from './components/roster/parts/corner';
@@ -10,10 +12,13 @@ export { RosterGrid } from './components/roster/parts/grid';
 export { RosterHeader } from './components/roster/parts/header';
 export { RosterHeaderCell } from './components/roster/parts/header-cell';
 export { RosterLaneLabelColumn } from './components/roster/parts/lane-label-column';
+export { RosterLaneList } from './components/roster/parts/lane-list';
 export type {
   BodyInput,
   GridInput,
+  HeaderCellInput,
   HeaderInput,
+  IntervalDetailInput,
   LabelColumnInput,
   LaneLabelInput,
   RosterInput,
@@ -24,6 +29,8 @@ export type {
   RosterStyleProps,
   RosterTick,
 } from './components/roster/roster.types';
+export { RosterSelectionPopover } from './components/roster/selection/selection-layout';
+export type { SelectionLayoutProps } from './components/roster/selection/selection-layout.types';
 export { useRoster } from './components/roster/use-roster';
 export { Schedule } from './components/schedule';
 export { ScheduleColumn } from './components/schedule/days/parts/column';