@wireservers-ui/react-natives 2.0.0 → 2.0.2-rc.0

package/src/calendar/calendar-day-cell.tsx

@@ -1,67 +1,67 @@
-import React from 'react';
-import { View, Text, Pressable } from 'react-native';
-import { useCalendarContext } from './calendar';
-import type { CalendarDay } from './types';
-import { isSameDay } from './utils';
-import {
-  calendarDayCellStyle,
-  calendarDayNumberStyle,
-  calendarDayNumberTextStyle,
-} from './styles';
-import { CalendarEvent as CalendarEventComponent } from './calendar-event';
-
-interface CalendarDayCellProps {
-  day: CalendarDay;
-  className?: string;
-}
-
-export const CalendarDayCell = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  CalendarDayCellProps
->(({ day, className, ...props }, ref) => {
-  const { selectedDate, setSelectedDate, renderEvent } = useCalendarContext();
-  const isSelected = selectedDate ? isSameDay(selectedDate, day.date) : false;
-
-  return (
-    <Pressable
-      ref={ref}
-      className={calendarDayCellStyle({
-        isCurrentMonth: day.isCurrentMonth,
-        class: className,
-      })}
-      onPress={() => setSelectedDate(day.date)}
-      {...props}
-    >
-      <View
-        className={calendarDayNumberStyle({
-          isToday: day.isToday,
-          isSelected,
-        })}
-      >
-        <Text
-          className={calendarDayNumberTextStyle({
-            isToday: day.isToday,
-            isSelected,
-            isCurrentMonth: day.isCurrentMonth,
-          })}
-        >
-          {day.date.getDate()}
-        </Text>
-      </View>
-      {day.events.slice(0, 2).map((event) =>
-        renderEvent ? (
-          <React.Fragment key={event.id}>{renderEvent(event)}</React.Fragment>
-        ) : (
-          <CalendarEventComponent key={event.id} event={event} compact />
-        ),
-      )}
-      {day.events.length > 2 && (
-        <Text className="text-2xs text-typography-500 mt-0.5">
-          +{day.events.length - 2} more
-        </Text>
-      )}
-    </Pressable>
-  );
-});
-
-CalendarDayCell.displayName = 'CalendarDayCell';
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { useCalendarContext } from './calendar';
+import type { CalendarDay } from './types';
+import { isSameDay } from './utils';
+import {
+  calendarDayCellStyle,
+  calendarDayNumberStyle,
+  calendarDayNumberTextStyle,
+} from './styles';
+import { CalendarEvent as CalendarEventComponent } from './calendar-event';
+
+interface CalendarDayCellProps {
+  day: CalendarDay;
+  className?: string;
+}
+
+export const CalendarDayCell = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  CalendarDayCellProps
+>(({ day, className, ...props }, ref) => {
+  const { selectedDate, setSelectedDate, renderEvent } = useCalendarContext();
+  const isSelected = selectedDate ? isSameDay(selectedDate, day.date) : false;
+
+  return (
+    <Pressable
+      ref={ref}
+      className={calendarDayCellStyle({
+        isCurrentMonth: day.isCurrentMonth,
+        class: className,
+      })}
+      onPress={() => setSelectedDate(day.date)}
+      {...props}
+    >
+      <View
+        className={calendarDayNumberStyle({
+          isToday: day.isToday,
+          isSelected,
+        })}
+      >
+        <Text
+          className={calendarDayNumberTextStyle({
+            isToday: day.isToday,
+            isSelected,
+            isCurrentMonth: day.isCurrentMonth,
+          })}
+        >
+          {day.date.getDate()}
+        </Text>
+      </View>
+      {day.events.slice(0, 2).map((event) =>
+        renderEvent ? (
+          <React.Fragment key={event.id}>{renderEvent(event)}</React.Fragment>
+        ) : (
+          <CalendarEventComponent key={event.id} event={event} compact />
+        ),
+      )}
+      {day.events.length > 2 && (
+        <Text className="text-2xs text-typography-500 mt-0.5">
+          +{day.events.length - 2} more
+        </Text>
+      )}
+    </Pressable>
+  );
+});
+
+CalendarDayCell.displayName = 'CalendarDayCell';

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

@@ -1,66 +1,66 @@
-import React, { useMemo } from 'react';
-import { View, Text, ScrollView } from 'react-native';
-import { useCalendarContext } from './calendar';
-import { formatHour } from './utils';
-import { CalendarEvent as CalendarEventComponent } from './calendar-event';
-import {
-  calendarTimeSlotStyle,
-  calendarTimeSlotLabelStyle,
-  calendarTimeSlotLabelTextStyle,
-  calendarTimeSlotContentStyle,
-} from './styles';
-
-const HOURS = Array.from({ length: 24 }, (_, i) => i);
-
-export const CalendarDayView = React.forwardRef<
-  React.ElementRef<typeof ScrollView>,
-  { className?: string }
->(({ className, ...props }, ref) => {
-  const { displayDate, getEventsForDate, renderEvent } = useCalendarContext();
-
-  const dayEvents = useMemo(
-    () => getEventsForDate(displayDate),
-    [displayDate, getEventsForDate],
-  );
-
-  const eventsByHour = useMemo(() => {
-    const map = new Map<number, typeof dayEvents>();
-    dayEvents.forEach((event) => {
-      const hour = event.start.getHours();
-      const existing = map.get(hour) || [];
-      existing.push(event);
-      map.set(hour, existing);
-    });
-    return map;
-  }, [dayEvents]);
-
-  return (
-    <ScrollView ref={ref} className={className} {...props}>
-      {HOURS.map((hour) => {
-        const events = eventsByHour.get(hour) || [];
-        return (
-          <View key={hour} className={calendarTimeSlotStyle({})}>
-            <View className={calendarTimeSlotLabelStyle({})}>
-              <Text className={calendarTimeSlotLabelTextStyle({})}>
-                {formatHour(hour)}
-              </Text>
-            </View>
-            <View className={calendarTimeSlotContentStyle({})}>
-              {events.map((event) =>
-                renderEvent ? (
-                  <React.Fragment key={event.id}>
-                    {renderEvent(event)}
-                  </React.Fragment>
-                ) : (
-                  <CalendarEventComponent key={event.id} event={event} />
-                ),
-              )}
-            </View>
-          </View>
-        );
-      })}
-    </ScrollView>
-  );
-});
-
-CalendarDayView.displayName = 'CalendarDayView';
+import React, { useMemo } from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import { useCalendarContext } from './calendar';
+import { formatHour } from './utils';
+import { CalendarEvent as CalendarEventComponent } from './calendar-event';
+import {
+  calendarTimeSlotStyle,
+  calendarTimeSlotLabelStyle,
+  calendarTimeSlotLabelTextStyle,
+  calendarTimeSlotContentStyle,
+} from './styles';
+
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+
+export const CalendarDayView = React.forwardRef<
+  React.ElementRef<typeof ScrollView>,
+  { className?: string }
+>(({ className, ...props }, ref) => {
+  const { displayDate, getEventsForDate, renderEvent } = useCalendarContext();
+
+  const dayEvents = useMemo(
+    () => getEventsForDate(displayDate),
+    [displayDate, getEventsForDate],
+  );
+
+  const eventsByHour = useMemo(() => {
+    const map = new Map<number, typeof dayEvents>();
+    dayEvents.forEach((event) => {
+      const hour = event.start.getHours();
+      const existing = map.get(hour) || [];
+      existing.push(event);
+      map.set(hour, existing);
+    });
+    return map;
+  }, [dayEvents]);
+
+  return (
+    <ScrollView ref={ref} className={className} {...props}>
+      {HOURS.map((hour) => {
+        const events = eventsByHour.get(hour) || [];
+        return (
+          <View key={hour} className={calendarTimeSlotStyle({})}>
+            <View className={calendarTimeSlotLabelStyle({})}>
+              <Text className={calendarTimeSlotLabelTextStyle({})}>
+                {formatHour(hour)}
+              </Text>
+            </View>
+            <View className={calendarTimeSlotContentStyle({})}>
+              {events.map((event) =>
+                renderEvent ? (
+                  <React.Fragment key={event.id}>
+                    {renderEvent(event)}
+                  </React.Fragment>
+                ) : (
+                  <CalendarEventComponent key={event.id} event={event} />
+                ),
+              )}
+            </View>
+          </View>
+        );
+      })}
+    </ScrollView>
+  );
+});
+
+CalendarDayView.displayName = 'CalendarDayView';

package/src/calendar/calendar-event.tsx

@@ -1,59 +1,59 @@
-import React from 'react';
-import { Text, Pressable } from 'react-native';
-import { useCalendarContext } from './calendar';
-import type {
-  CalendarEvent as CalendarEventType,
-  EventColor,
-  EventVariant,
-} from './types';
-import { formatTime } from './utils';
-import { calendarEventStyle, calendarEventTextStyle } 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';
-}
-
-interface CalendarEventComponentProps {
-  event: CalendarEventType;
-  compact?: boolean;
-  variant?: EventVariant;
-  className?: string;
-}
-
-export const CalendarEvent = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  CalendarEventComponentProps
->(({ event, compact = false, variant = 'subtle', className, ...props }, ref) => {
-  const { onEventPress } = useCalendarContext();
-  const color = mapEventColor(event.color);
-
-  return (
-    <Pressable
-      ref={ref}
-      className={calendarEventStyle({ color, variant, class: className })}
-      onPress={() => onEventPress?.(event)}
-      {...props}
-    >
-      <Text
-        className={calendarEventTextStyle({ color, variant })}
-        numberOfLines={compact ? 1 : undefined}
-      >
-        {compact ? event.title : `${formatTime(event.start)} ${event.title}`}
-      </Text>
-    </Pressable>
-  );
-});
-
-CalendarEvent.displayName = 'CalendarEvent';
+import React from 'react';
+import { Text, Pressable } from 'react-native';
+import { useCalendarContext } from './calendar';
+import type {
+  CalendarEvent as CalendarEventType,
+  EventColor,
+  EventVariant,
+} from './types';
+import { formatTime } from './utils';
+import { calendarEventStyle, calendarEventTextStyle } 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';
+}
+
+interface CalendarEventComponentProps {
+  event: CalendarEventType;
+  compact?: boolean;
+  variant?: EventVariant;
+  className?: string;
+}
+
+export const CalendarEvent = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  CalendarEventComponentProps
+>(({ event, compact = false, variant = 'subtle', className, ...props }, ref) => {
+  const { onEventPress } = useCalendarContext();
+  const color = mapEventColor(event.color);
+
+  return (
+    <Pressable
+      ref={ref}
+      className={calendarEventStyle({ color, variant, class: className })}
+      onPress={() => onEventPress?.(event)}
+      {...props}
+    >
+      <Text
+        className={calendarEventTextStyle({ color, variant })}
+        numberOfLines={compact ? 1 : undefined}
+      >
+        {compact ? event.title : `${formatTime(event.start)} ${event.title}`}
+      </Text>
+    </Pressable>
+  );
+});
+
+CalendarEvent.displayName = 'CalendarEvent';

package/src/calendar/calendar-header.tsx

@@ -1,60 +1,60 @@
-import React from 'react';
-import { View, Text, Pressable } from 'react-native';
-import { useCalendarContext } from './calendar';
-import { getMonthName, getWeekRangeTitle } from './utils';
-import {
-  calendarHeaderStyle,
-  calendarHeaderTitleStyle,
-  calendarNavButtonStyle,
-} from './styles';
-
-export const CalendarHeader = React.forwardRef<
-  React.ElementRef<typeof View>,
-  { className?: string }
->(({ className, ...props }, ref) => {
-  const { displayDate, navigateMonth, navigateWeek, navigateDay, timeRange } =
-    useCalendarContext();
-
-  const navigate = (direction: 1 | -1) => {
-    if (timeRange === 'month') navigateMonth(direction);
-    else if (timeRange === 'week') navigateWeek(direction);
-    else navigateDay(direction);
-  };
-
-  let title: string;
-  switch (timeRange) {
-    case 'day':
-      title = `${getMonthName(displayDate.getMonth())} ${displayDate.getDate()}, ${displayDate.getFullYear()}`;
-      break;
-    case 'week':
-      title = getWeekRangeTitle(displayDate);
-      break;
-    case 'month':
-      title = `${getMonthName(displayDate.getMonth())} ${displayDate.getFullYear()}`;
-      break;
-  }
-
-  return (
-    <View
-      ref={ref}
-      className={calendarHeaderStyle({ class: className })}
-      {...props}
-    >
-      <Pressable
-        className={calendarNavButtonStyle({})}
-        onPress={() => navigate(-1)}
-      >
-        <Text className="text-typography-700 text-lg">{'\u2039'}</Text>
-      </Pressable>
-      <Text className={calendarHeaderTitleStyle({})}>{title}</Text>
-      <Pressable
-        className={calendarNavButtonStyle({})}
-        onPress={() => navigate(1)}
-      >
-        <Text className="text-typography-700 text-lg">{'\u203A'}</Text>
-      </Pressable>
-    </View>
-  );
-});
-
-CalendarHeader.displayName = 'CalendarHeader';
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { useCalendarContext } from './calendar';
+import { getMonthName, getWeekRangeTitle } from './utils';
+import {
+  calendarHeaderStyle,
+  calendarHeaderTitleStyle,
+  calendarNavButtonStyle,
+} from './styles';
+
+export const CalendarHeader = React.forwardRef<
+  React.ElementRef<typeof View>,
+  { className?: string }
+>(({ className, ...props }, ref) => {
+  const { displayDate, navigateMonth, navigateWeek, navigateDay, timeRange } =
+    useCalendarContext();
+
+  const navigate = (direction: 1 | -1) => {
+    if (timeRange === 'month') navigateMonth(direction);
+    else if (timeRange === 'week') navigateWeek(direction);
+    else navigateDay(direction);
+  };
+
+  let title: string;
+  switch (timeRange) {
+    case 'day':
+      title = `${getMonthName(displayDate.getMonth())} ${displayDate.getDate()}, ${displayDate.getFullYear()}`;
+      break;
+    case 'week':
+      title = getWeekRangeTitle(displayDate);
+      break;
+    case 'month':
+      title = `${getMonthName(displayDate.getMonth())} ${displayDate.getFullYear()}`;
+      break;
+  }
+
+  return (
+    <View
+      ref={ref}
+      className={calendarHeaderStyle({ class: className })}
+      {...props}
+    >
+      <Pressable
+        className={calendarNavButtonStyle({})}
+        onPress={() => navigate(-1)}
+      >
+        <Text className="text-typography-700 text-lg">{'\u2039'}</Text>
+      </Pressable>
+      <Text className={calendarHeaderTitleStyle({})}>{title}</Text>
+      <Pressable
+        className={calendarNavButtonStyle({})}
+        onPress={() => navigate(1)}
+      >
+        <Text className="text-typography-700 text-lg">{'\u203A'}</Text>
+      </Pressable>
+    </View>
+  );
+});
+
+CalendarHeader.displayName = 'CalendarHeader';