@wireservers-ui/react-natives 0.1.0

package/src/calendar/calendar-vertical-view.tsx

@@ -0,0 +1,395 @@
+import React, { useMemo } from 'react';
+import { View, Text, ScrollView, Pressable } from 'react-native';
+import { useCalendarContext } from './calendar';
+import type { CalendarEvent as CalendarEventType, EventColor } from './types';
+import {
+  getTimeSlots,
+  formatTimeRange,
+  getEventTopOffset,
+  getEventHeight,
+  getWeekDates,
+  getMonthDates,
+  formatWeekDayShort,
+  formatMonthDay,
+  isSameDay,
+} from './utils';
+import {
+  calendarVerticalMemberHeaderStyle,
+  calendarVerticalMemberCellStyle,
+  calendarVerticalMemberNameStyle,
+  calendarVerticalMemberRoleStyle,
+  calendarVerticalTimeColumnStyle,
+  calendarVerticalTimeCellStyle,
+  calendarVerticalTimeCellTextStyle,
+  calendarVerticalColumnStyle,
+  calendarVerticalGridCellStyle,
+  calendarVerticalEventStyle,
+  calendarVerticalEventTitleStyle,
+  calendarVerticalEventTimeStyle,
+  calendarHorizontalAvatarStyle,
+  calendarHorizontalAvatarTextStyle,
+  calendarCompactEventStyle,
+  calendarCompactEventTextStyle,
+} from './styles';
+
+const VALID_COLORS: EventColor[] = [
+  'primary',
+  'info',
+  'success',
+  'warning',
+  'error',
+  'tertiary',
+];
+
+function mapEventColor(color?: string): EventColor {
+  if (color && VALID_COLORS.includes(color as EventColor)) {
+    return color as EventColor;
+  }
+  return 'info';
+}
+
+// --- Day mode: precisely positioned event blocks ---
+
+interface VerticalEventBlockProps {
+  event: CalendarEventType;
+  top: number;
+  height: number;
+  onPress?: (event: CalendarEventType) => void;
+}
+
+const VerticalEventBlock: React.FC<VerticalEventBlockProps> = ({
+  event,
+  top,
+  height,
+  onPress,
+}) => {
+  const color = mapEventColor(event.color);
+  const timeStr = formatTimeRange(event.start, event.end);
+
+  return (
+    <Pressable
+      className={calendarVerticalEventStyle({ color })}
+      style={{
+        top,
+        height: Math.max(height - 2, 20),
+      }}
+      onPress={() => onPress?.(event)}
+    >
+      <Text
+        className={calendarVerticalEventTitleStyle({})}
+        numberOfLines={1}
+      >
+        {event.title}
+      </Text>
+      {height > 40 && (
+        <Text
+          className={calendarVerticalEventTimeStyle({})}
+          numberOfLines={1}
+        >
+          {timeStr}
+        </Text>
+      )}
+    </Pressable>
+  );
+};
+
+interface DayMemberColumnProps {
+  events: CalendarEventType[];
+  timeSlots: string[];
+  config: {
+    startHour: number;
+    slotMinutes: number;
+    slotHeight: number;
+  };
+  totalHeight: number;
+  onEventPress?: (event: CalendarEventType) => void;
+}
+
+const DayMemberColumn: React.FC<DayMemberColumnProps> = ({
+  events,
+  timeSlots,
+  config,
+  totalHeight,
+  onEventPress,
+}) => {
+  return (
+    <View
+      className={calendarVerticalColumnStyle({})}
+      style={{ flex: 1, height: totalHeight }}
+    >
+      {timeSlots.map((slot) => (
+        <View
+          key={slot}
+          className={calendarVerticalGridCellStyle({})}
+          style={{ height: config.slotHeight }}
+        />
+      ))}
+      {events.map((event) => {
+        const top = getEventTopOffset(
+          event.start,
+          config.startHour,
+          config.slotMinutes,
+          config.slotHeight,
+        );
+        const height = getEventHeight(
+          event.start,
+          event.end,
+          config.slotMinutes,
+          config.slotHeight,
+        );
+        return (
+          <VerticalEventBlock
+            key={event.id}
+            event={event}
+            top={top}
+            height={height}
+            onPress={onEventPress}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+// --- Week/Month mode: compact stacked events per date row ---
+
+interface CompactEventProps {
+  event: CalendarEventType;
+  onPress?: (event: CalendarEventType) => void;
+}
+
+const CompactEvent: React.FC<CompactEventProps> = ({ event, onPress }) => {
+  const color = mapEventColor(event.color);
+  return (
+    <Pressable
+      className={calendarCompactEventStyle({ color })}
+      onPress={() => onPress?.(event)}
+    >
+      <Text className={calendarCompactEventTextStyle({})} numberOfLines={1}>
+        {event.title}
+      </Text>
+    </Pressable>
+  );
+};
+
+interface DateMemberColumnProps {
+  dates: Date[];
+  events: CalendarEventType[];
+  rowHeight: number;
+  columnWidth?: number;
+  totalHeight: number;
+  flexColumn?: boolean;
+  onEventPress?: (event: CalendarEventType) => void;
+}
+
+const DateMemberColumn: React.FC<DateMemberColumnProps> = ({
+  dates,
+  events,
+  rowHeight,
+  columnWidth,
+  totalHeight,
+  flexColumn,
+  onEventPress,
+}) => {
+  return (
+    <View
+      className={calendarVerticalColumnStyle({})}
+      style={flexColumn ? { flex: 1, height: totalHeight } : { width: columnWidth, height: totalHeight }}
+    >
+      {dates.map((date) => {
+        const dayEvents = events.filter((e) => isSameDay(e.start, date));
+        return (
+          <View
+            key={date.toISOString()}
+            className={calendarVerticalGridCellStyle({})}
+            style={{ height: rowHeight, padding: 2 }}
+          >
+            {dayEvents.slice(0, 2).map((event) => (
+              <CompactEvent
+                key={event.id}
+                event={event}
+                onPress={onEventPress}
+              />
+            ))}
+            {dayEvents.length > 2 && (
+              <Text className="text-2xs text-typography-400 px-1">
+                +{dayEvents.length - 2}
+              </Text>
+            )}
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+// --- Main component ---
+
+export const CalendarVerticalView = React.forwardRef<
+  React.ElementRef<typeof View>,
+  { className?: string }
+>(({ className, ...props }, ref) => {
+  const {
+    displayDate,
+    timeRange,
+    members,
+    events,
+    horizontalConfig: config,
+    getEventsForMember,
+    onEventPress,
+  } = useCalendarContext();
+
+  // Day mode: time slots
+  const timeSlots = useMemo(
+    () => getTimeSlots(config.startHour, config.endHour, config.slotMinutes),
+    [config.startHour, config.endHour, config.slotMinutes],
+  );
+
+  // Week/month mode: date rows
+  const dates = useMemo(() => {
+    if (timeRange === 'week') return getWeekDates(displayDate);
+    if (timeRange === 'month') return getMonthDates(displayDate);
+    return [];
+  }, [timeRange, displayDate]);
+
+  // Compute row labels and row height
+  const rowHeight = timeRange === 'month' ? 48 : config.slotHeight;
+  const rowLabels = useMemo(() => {
+    if (timeRange === 'day') return timeSlots;
+    if (timeRange === 'week') return dates.map(formatWeekDayShort);
+    return dates.map(formatMonthDay);
+  }, [timeRange, timeSlots, dates]);
+
+  const totalGridHeight =
+    timeRange === 'day'
+      ? timeSlots.length * config.slotHeight
+      : dates.length * rowHeight;
+
+  // Day mode: events per member for the display date
+  const dayMemberEvents = useMemo(() => {
+    if (timeRange !== 'day') return new Map<string, CalendarEventType[]>();
+    const map = new Map<string, CalendarEventType[]>();
+    members.forEach((member) => {
+      map.set(member.id, getEventsForMember(member.id, displayDate));
+    });
+    return map;
+  }, [timeRange, members, displayDate, getEventsForMember]);
+
+  // Week/month mode: all events per member across the date range
+  const dateMemberEvents = useMemo(() => {
+    if (timeRange === 'day') return new Map<string, CalendarEventType[]>();
+    const map = new Map<string, CalendarEventType[]>();
+    members.forEach((member) => {
+      map.set(
+        member.id,
+        events.filter(
+          (e) =>
+            e.memberId === member.id &&
+            dates.some((d) => isSameDay(e.start, d)),
+        ),
+      );
+    });
+    return map;
+  }, [timeRange, members, events, dates]);
+
+  const MEMBER_HEADER_HEIGHT = 80;
+
+  return (
+    <View ref={ref} className={className} {...props}>
+      <View className="flex-row">
+        {/* Fixed left column: empty corner + row labels */}
+        <View
+          className={calendarVerticalTimeColumnStyle({})}
+          style={{ width: config.timeColumnWidth }}
+        >
+          <View
+            className="border-b border-outline-200"
+            style={{ height: MEMBER_HEADER_HEIGHT }}
+          />
+          {rowLabels.map((label, i) => (
+            <View
+              key={`${label}-${i}`}
+              className={calendarVerticalTimeCellStyle({})}
+              style={{ height: timeRange === 'day' ? config.slotHeight : rowHeight }}
+            >
+              <Text className={calendarVerticalTimeCellTextStyle({})}>
+                {label}
+              </Text>
+            </View>
+          ))}
+        </View>
+
+        {/* Right section: member columns fill 100% width */}
+        <View className="flex-1">
+          {/* Member header row */}
+          <View
+            className={calendarVerticalMemberHeaderStyle({})}
+            style={{ height: MEMBER_HEADER_HEIGHT }}
+          >
+            {members.map((member) => (
+              <View
+                key={member.id}
+                className={calendarVerticalMemberCellStyle({})}
+                style={{ flex: 1 }}
+              >
+                <View
+                  className={calendarHorizontalAvatarStyle({
+                    color: member.avatarColor || 'primary',
+                  })}
+                >
+                  <Text className={calendarHorizontalAvatarTextStyle({})}>
+                    {member.initials}
+                  </Text>
+                </View>
+                <Text
+                  className={calendarVerticalMemberNameStyle({})}
+                  numberOfLines={1}
+                >
+                  {member.name}
+                </Text>
+                {member.role && (
+                  <Text
+                    className={calendarVerticalMemberRoleStyle({})}
+                    numberOfLines={1}
+                  >
+                    {member.role}
+                  </Text>
+                )}
+              </View>
+            ))}
+          </View>
+
+          {/* Grid body: one column per member */}
+          <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator>
+            <View style={{ flexDirection: 'row', width: '100%' }}>
+              {members.map((member) =>
+                timeRange === 'day' ? (
+                  <DayMemberColumn
+                    key={member.id}
+                    events={dayMemberEvents.get(member.id) || []}
+                    timeSlots={timeSlots}
+                    config={config}
+                    totalHeight={totalGridHeight}
+                    onEventPress={onEventPress}
+                  />
+                ) : (
+                  <DateMemberColumn
+                    key={member.id}
+                    dates={dates}
+                    events={dateMemberEvents.get(member.id) || []}
+                    rowHeight={rowHeight}
+                    totalHeight={totalGridHeight}
+                    flexColumn
+                    onEventPress={onEventPress}
+                  />
+                ),
+              )}
+            </View>
+          </ScrollView>
+        </View>
+      </View>
+    </View>
+  );
+});
+
+CalendarVerticalView.displayName = 'CalendarVerticalView';

package/src/calendar/calendar-view-switcher.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { useCalendarContext } from './calendar';
+import type { CalendarLayout, CalendarTimeRange } from './types';
+import {
+  calendarViewSwitcherStyle,
+  calendarViewButtonStyle,
+  calendarViewButtonTextStyle,
+} from './styles';
+
+type SwitcherTarget = 'layout' | 'timeRange';
+
+const DEFAULT_LAYOUT_VIEWS: { key: string; label: string }[] = [
+  { key: 'horizontal', label: 'Horizontal' },
+  { key: 'vertical', label: 'Vertical' },
+];
+
+const DEFAULT_TIME_RANGE_VIEWS: { key: string; label: string }[] = [
+  { key: 'day', label: 'Day' },
+  { key: 'week', label: 'Week' },
+  { key: 'month', label: 'Month' },
+];
+
+export const CalendarViewSwitcher = React.forwardRef<
+  React.ElementRef<typeof View>,
+  {
+    className?: string;
+    views?: { key: string; label: string }[];
+    target?: SwitcherTarget;
+  }
+>(({ className, views, target = 'layout', ...props }, ref) => {
+  const ctx = useCalendarContext();
+
+  const defaultViews = target === 'timeRange' ? DEFAULT_TIME_RANGE_VIEWS : DEFAULT_LAYOUT_VIEWS;
+  const resolvedViews = views ?? defaultViews;
+
+  const activeKey = target === 'timeRange' ? ctx.timeRange : ctx.layout;
+  const setActive = target === 'timeRange'
+    ? (key: string) => ctx.setTimeRange(key as CalendarTimeRange)
+    : (key: string) => ctx.setLayout(key as CalendarLayout);
+
+  return (
+    <View
+      ref={ref}
+      className={calendarViewSwitcherStyle({ class: className })}
+      {...props}
+    >
+      {resolvedViews.map(({ key, label }) => (
+        <Pressable
+          key={key}
+          className={calendarViewButtonStyle({ active: activeKey === key })}
+          onPress={() => setActive(key)}
+        >
+          <Text
+            className={calendarViewButtonTextStyle({ active: activeKey === key })}
+          >
+            {label}
+          </Text>
+        </Pressable>
+      ))}
+    </View>
+  );
+});
+
+CalendarViewSwitcher.displayName = 'CalendarViewSwitcher';

package/src/calendar/calendar-week-view.tsx

@@ -0,0 +1,52 @@
+import React, { useMemo } from 'react';
+import { View, Text } from 'react-native';
+import { useCalendarContext } from './calendar';
+import { addDays, getWeekDays, isSameDay } from './utils';
+import { CalendarDayCell } from './calendar-day-cell';
+import {
+  calendarWeekDayLabelStyle,
+  calendarWeekDayLabelTextStyle,
+} from './styles';
+import type { CalendarDay } from './types';
+
+export const CalendarWeekView = React.forwardRef<
+  React.ElementRef<typeof View>,
+  { className?: string }
+>(({ className, ...props }, ref) => {
+  const { displayDate, getEventsForDate } = useCalendarContext();
+
+  const weekDays = useMemo(() => {
+    const dayOfWeek = displayDate.getDay();
+    const sunday = addDays(displayDate, -dayOfWeek);
+    const days: CalendarDay[] = [];
+    for (let i = 0; i < 7; i++) {
+      const date = addDays(sunday, i);
+      days.push({
+        date,
+        isCurrentMonth: date.getMonth() === displayDate.getMonth(),
+        isToday: isSameDay(date, new Date()),
+        events: getEventsForDate(date),
+      });
+    }
+    return days;
+  }, [displayDate, getEventsForDate]);
+
+  return (
+    <View ref={ref} className={className} {...props}>
+      <View className="flex-row">
+        {getWeekDays().map((day) => (
+          <View key={day} className={calendarWeekDayLabelStyle({})}>
+            <Text className={calendarWeekDayLabelTextStyle({})}>{day}</Text>
+          </View>
+        ))}
+      </View>
+      <View className="flex-row">
+        {weekDays.map((day) => (
+          <CalendarDayCell key={day.date.toISOString()} day={day} />
+        ))}
+      </View>
+    </View>
+  );
+});
+
+CalendarWeekView.displayName = 'CalendarWeekView';

package/src/calendar/calendar.tsx

@@ -0,0 +1,74 @@
+import React, { createContext, useContext } from 'react';
+import { View } from 'react-native';
+import type { CalendarProps, CalendarContextValue } from './types';
+import { useCalendar } from './use-calendar';
+import { calendarRootStyle } from './styles';
+
+export const CalendarContext = createContext<CalendarContextValue | null>(null);
+
+export function useCalendarContext(): CalendarContextValue {
+  const ctx = useContext(CalendarContext);
+  if (!ctx) {
+    throw new Error(
+      'Calendar compound components must be used within <Calendar>',
+    );
+  }
+  return ctx;
+}
+
+export const Calendar = React.forwardRef<
+  React.ElementRef<typeof View>,
+  CalendarProps
+>(
+  (
+    {
+      events,
+      members,
+      horizontalConfig,
+      initialDate,
+      initialLayout,
+      initialTimeRange,
+      initialView,
+      onDateSelect,
+      onEventPress,
+      onMonthChange,
+      onViewChange,
+      onTimeRangeChange,
+      renderEvent,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const calendarState = useCalendar({
+      events,
+      members,
+      horizontalConfig,
+      initialDate,
+      initialLayout,
+      initialTimeRange,
+      initialView,
+      onDateSelect,
+      onEventPress,
+      onMonthChange,
+      onViewChange,
+      onTimeRangeChange,
+      renderEvent,
+    });
+
+    return (
+      <CalendarContext.Provider value={calendarState}>
+        <View
+          ref={ref}
+          className={calendarRootStyle({ size: 'md', class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </CalendarContext.Provider>
+    );
+  },
+);
+
+Calendar.displayName = 'Calendar';

package/src/calendar/index.ts

@@ -0,0 +1,27 @@
+export { Calendar, CalendarContext, useCalendarContext } from './calendar';
+export { CalendarHeader } from './calendar-header';
+export { CalendarViewSwitcher } from './calendar-view-switcher';
+export { CalendarMonthView } from './calendar-month-view';
+export { CalendarWeekView } from './calendar-week-view';
+export { CalendarDayView } from './calendar-day-view';
+export { CalendarHorizontalView } from './calendar-horizontal-view';
+export { CalendarVerticalView } from './calendar-vertical-view';
+export { CalendarDayCell } from './calendar-day-cell';
+export { CalendarEvent } from './calendar-event';
+export { CalendarLegend } from './calendar-legend';
+export type { CalendarLegendItem } from './calendar-legend';
+
+export type {
+  CalendarProps,
+  CalendarEvent as CalendarEventType,
+  CalendarLayout,
+  CalendarTimeRange,
+  CalendarView,
+  CalendarDay,
+  CalendarWeek,
+  CalendarContextValue,
+  EventColor,
+  EventVariant,
+  CalendarTeamMember,
+  CalendarHorizontalConfig,
+} from './types';