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

package/src/calendar/types.ts

@@ -1,101 +1,101 @@
-import type React from 'react';
-
-export type CalendarLayout = 'horizontal' | 'vertical';
-export type CalendarTimeRange = 'day' | 'week' | 'month';
-
-/** @deprecated Use CalendarLayout instead */
-export type CalendarView = CalendarLayout;
-
-export type EventColor =
-  | 'primary'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'error'
-  | 'tertiary';
-
-export type EventVariant = 'subtle' | 'solid';
-
-export interface CalendarEvent {
-  id: string;
-  title: string;
-  start: Date;
-  end: Date;
-  color?: EventColor;
-  allDay?: boolean;
-  memberId?: string;
-}
-
-export interface CalendarTeamMember {
-  id: string;
-  name: string;
-  role?: string;
-  initials: string;
-  avatarColor?: EventColor;
-}
-
-export interface CalendarHorizontalConfig {
-  startHour?: number;
-  endHour?: number;
-  slotMinutes?: number;
-  slotWidth?: number;
-  memberColumnWidth?: number;
-  slotHeight?: number;
-  timeColumnWidth?: number;
-}
-
-export interface CalendarDay {
-  date: Date;
-  isCurrentMonth: boolean;
-  isToday: boolean;
-  events: CalendarEvent[];
-}
-
-export interface CalendarWeek {
-  days: CalendarDay[];
-}
-
-export interface CalendarProps {
-  events?: CalendarEvent[];
-  members?: CalendarTeamMember[];
-  horizontalConfig?: CalendarHorizontalConfig;
-  initialDate?: Date;
-  initialLayout?: CalendarLayout;
-  initialTimeRange?: CalendarTimeRange;
-  /** @deprecated Use initialLayout instead */
-  initialView?: CalendarLayout;
-  onDateSelect?: (date: Date) => void;
-  onEventPress?: (event: CalendarEvent) => void;
-  onMonthChange?: (year: number, month: number) => void;
-  onViewChange?: (layout: CalendarLayout) => void;
-  onTimeRangeChange?: (timeRange: CalendarTimeRange) => void;
-  renderEvent?: (event: CalendarEvent) => React.ReactNode;
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export interface CalendarContextValue {
-  currentDate: Date;
-  displayDate: Date;
-  layout: CalendarLayout;
-  timeRange: CalendarTimeRange;
-  /** @deprecated Use layout instead */
-  view: CalendarLayout;
-  events: CalendarEvent[];
-  members: CalendarTeamMember[];
-  horizontalConfig: Required<CalendarHorizontalConfig>;
-  selectedDate: Date | null;
-  setSelectedDate: (date: Date) => void;
-  setDisplayDate: (date: Date) => void;
-  setLayout: (layout: CalendarLayout) => void;
-  setTimeRange: (timeRange: CalendarTimeRange) => void;
-  /** @deprecated Use setLayout instead */
-  setView: (layout: CalendarLayout) => void;
-  navigateMonth: (direction: 1 | -1) => void;
-  navigateWeek: (direction: 1 | -1) => void;
-  navigateDay: (direction: 1 | -1) => void;
-  getEventsForDate: (date: Date) => CalendarEvent[];
-  getEventsForMember: (memberId: string, date: Date) => CalendarEvent[];
-  onEventPress?: (event: CalendarEvent) => void;
-  renderEvent?: (event: CalendarEvent) => React.ReactNode;
-}
+import type React from 'react';
+
+export type CalendarLayout = 'horizontal' | 'vertical';
+export type CalendarTimeRange = 'day' | 'week' | 'month';
+
+/** @deprecated Use CalendarLayout instead */
+export type CalendarView = CalendarLayout;
+
+export type EventColor =
+  | 'primary'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'tertiary';
+
+export type EventVariant = 'subtle' | 'solid';
+
+export interface CalendarEvent {
+  id: string;
+  title: string;
+  start: Date;
+  end: Date;
+  color?: EventColor;
+  allDay?: boolean;
+  memberId?: string;
+}
+
+export interface CalendarTeamMember {
+  id: string;
+  name: string;
+  role?: string;
+  initials: string;
+  avatarColor?: EventColor;
+}
+
+export interface CalendarHorizontalConfig {
+  startHour?: number;
+  endHour?: number;
+  slotMinutes?: number;
+  slotWidth?: number;
+  memberColumnWidth?: number;
+  slotHeight?: number;
+  timeColumnWidth?: number;
+}
+
+export interface CalendarDay {
+  date: Date;
+  isCurrentMonth: boolean;
+  isToday: boolean;
+  events: CalendarEvent[];
+}
+
+export interface CalendarWeek {
+  days: CalendarDay[];
+}
+
+export interface CalendarProps {
+  events?: CalendarEvent[];
+  members?: CalendarTeamMember[];
+  horizontalConfig?: CalendarHorizontalConfig;
+  initialDate?: Date;
+  initialLayout?: CalendarLayout;
+  initialTimeRange?: CalendarTimeRange;
+  /** @deprecated Use initialLayout instead */
+  initialView?: CalendarLayout;
+  onDateSelect?: (date: Date) => void;
+  onEventPress?: (event: CalendarEvent) => void;
+  onMonthChange?: (year: number, month: number) => void;
+  onViewChange?: (layout: CalendarLayout) => void;
+  onTimeRangeChange?: (timeRange: CalendarTimeRange) => void;
+  renderEvent?: (event: CalendarEvent) => React.ReactNode;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface CalendarContextValue {
+  currentDate: Date;
+  displayDate: Date;
+  layout: CalendarLayout;
+  timeRange: CalendarTimeRange;
+  /** @deprecated Use layout instead */
+  view: CalendarLayout;
+  events: CalendarEvent[];
+  members: CalendarTeamMember[];
+  horizontalConfig: Required<CalendarHorizontalConfig>;
+  selectedDate: Date | null;
+  setSelectedDate: (date: Date) => void;
+  setDisplayDate: (date: Date) => void;
+  setLayout: (layout: CalendarLayout) => void;
+  setTimeRange: (timeRange: CalendarTimeRange) => void;
+  /** @deprecated Use setLayout instead */
+  setView: (layout: CalendarLayout) => void;
+  navigateMonth: (direction: 1 | -1) => void;
+  navigateWeek: (direction: 1 | -1) => void;
+  navigateDay: (direction: 1 | -1) => void;
+  getEventsForDate: (date: Date) => CalendarEvent[];
+  getEventsForMember: (memberId: string, date: Date) => CalendarEvent[];
+  onEventPress?: (event: CalendarEvent) => void;
+  renderEvent?: (event: CalendarEvent) => React.ReactNode;
+}

package/src/calendar/use-calendar.ts

@@ -1,170 +1,170 @@
-import { useState, useCallback, useMemo } from 'react';
-import type {
-  CalendarEvent,
-  CalendarLayout,
-  CalendarTimeRange,
-  CalendarContextValue,
-  CalendarTeamMember,
-  CalendarHorizontalConfig,
-} from './types';
-import { addMonths, addDays, isSameDay, resolveHorizontalConfig } from './utils';
-
-export function useCalendar(options: {
-  events?: CalendarEvent[];
-  members?: CalendarTeamMember[];
-  horizontalConfig?: CalendarHorizontalConfig;
-  initialDate?: Date;
-  initialLayout?: CalendarLayout;
-  initialTimeRange?: CalendarTimeRange;
-  /** @deprecated Use initialLayout */
-  initialView?: CalendarLayout;
-  onDateSelect?: (date: Date) => void;
-  onMonthChange?: (year: number, month: number) => void;
-  onViewChange?: (layout: CalendarLayout) => void;
-  onTimeRangeChange?: (timeRange: CalendarTimeRange) => void;
-  onEventPress?: (event: CalendarEvent) => void;
-  renderEvent?: (event: CalendarEvent) => React.ReactNode;
-}): CalendarContextValue {
-  const {
-    events = [],
-    members = [],
-    horizontalConfig: horizontalConfigProp,
-    initialDate = new Date(),
-    initialLayout,
-    initialTimeRange = 'day',
-    initialView,
-    onDateSelect,
-    onMonthChange,
-    onViewChange,
-    onTimeRangeChange,
-    onEventPress,
-    renderEvent,
-  } = options;
-
-  const horizontalConfig = useMemo(
-    () => resolveHorizontalConfig(horizontalConfigProp),
-    [horizontalConfigProp],
-  );
-
-  const [displayDate, setDisplayDateState] = useState(initialDate);
-  const [selectedDate, setSelectedDateState] = useState<Date | null>(null);
-  const [layout, setLayoutState] = useState<CalendarLayout>(
-    initialLayout ?? initialView ?? 'horizontal',
-  );
-  const [timeRange, setTimeRangeState] = useState<CalendarTimeRange>(initialTimeRange);
-
-  const setDisplayDate = useCallback(
-    (date: Date) => {
-      setDisplayDateState(date);
-      onMonthChange?.(date.getFullYear(), date.getMonth());
-    },
-    [onMonthChange],
-  );
-
-  const setSelectedDate = useCallback(
-    (date: Date) => {
-      setSelectedDateState(date);
-      onDateSelect?.(date);
-    },
-    [onDateSelect],
-  );
-
-  const setLayout = useCallback(
-    (newLayout: CalendarLayout) => {
-      setLayoutState(newLayout);
-      onViewChange?.(newLayout);
-    },
-    [onViewChange],
-  );
-
-  const setTimeRange = useCallback(
-    (newTimeRange: CalendarTimeRange) => {
-      setTimeRangeState(newTimeRange);
-      onTimeRangeChange?.(newTimeRange);
-    },
-    [onTimeRangeChange],
-  );
-
-  const navigateMonth = useCallback(
-    (direction: 1 | -1) => {
-      setDisplayDate(addMonths(displayDate, direction));
-    },
-    [displayDate, setDisplayDate],
-  );
-
-  const navigateWeek = useCallback(
-    (direction: 1 | -1) => {
-      setDisplayDate(addDays(displayDate, direction * 7));
-    },
-    [displayDate, setDisplayDate],
-  );
-
-  const navigateDay = useCallback(
-    (direction: 1 | -1) => {
-      setDisplayDate(addDays(displayDate, direction));
-    },
-    [displayDate, setDisplayDate],
-  );
-
-  const getEventsForDate = useCallback(
-    (date: Date) => {
-      return events.filter((e) => isSameDay(e.start, date));
-    },
-    [events],
-  );
-
-  const getEventsForMember = useCallback(
-    (memberId: string, date: Date) => {
-      return events.filter(
-        (e) => e.memberId === memberId && isSameDay(e.start, date),
-      );
-    },
-    [events],
-  );
-
-  return useMemo(
-    () => ({
-      currentDate: new Date(),
-      displayDate,
-      layout,
-      timeRange,
-      view: layout,
-      events,
-      members,
-      horizontalConfig,
-      selectedDate,
-      setSelectedDate,
-      setDisplayDate,
-      setLayout,
-      setTimeRange,
-      setView: setLayout,
-      navigateMonth,
-      navigateWeek,
-      navigateDay,
-      getEventsForDate,
-      getEventsForMember,
-      onEventPress,
-      renderEvent,
-    }),
-    [
-      displayDate,
-      layout,
-      timeRange,
-      events,
-      members,
-      horizontalConfig,
-      selectedDate,
-      setSelectedDate,
-      setDisplayDate,
-      setLayout,
-      setTimeRange,
-      navigateMonth,
-      navigateWeek,
-      navigateDay,
-      getEventsForDate,
-      getEventsForMember,
-      onEventPress,
-      renderEvent,
-    ],
-  );
-}
+import { useState, useCallback, useMemo } from 'react';
+import type {
+  CalendarEvent,
+  CalendarLayout,
+  CalendarTimeRange,
+  CalendarContextValue,
+  CalendarTeamMember,
+  CalendarHorizontalConfig,
+} from './types';
+import { addMonths, addDays, isSameDay, resolveHorizontalConfig } from './utils';
+
+export function useCalendar(options: {
+  events?: CalendarEvent[];
+  members?: CalendarTeamMember[];
+  horizontalConfig?: CalendarHorizontalConfig;
+  initialDate?: Date;
+  initialLayout?: CalendarLayout;
+  initialTimeRange?: CalendarTimeRange;
+  /** @deprecated Use initialLayout */
+  initialView?: CalendarLayout;
+  onDateSelect?: (date: Date) => void;
+  onMonthChange?: (year: number, month: number) => void;
+  onViewChange?: (layout: CalendarLayout) => void;
+  onTimeRangeChange?: (timeRange: CalendarTimeRange) => void;
+  onEventPress?: (event: CalendarEvent) => void;
+  renderEvent?: (event: CalendarEvent) => React.ReactNode;
+}): CalendarContextValue {
+  const {
+    events = [],
+    members = [],
+    horizontalConfig: horizontalConfigProp,
+    initialDate = new Date(),
+    initialLayout,
+    initialTimeRange = 'day',
+    initialView,
+    onDateSelect,
+    onMonthChange,
+    onViewChange,
+    onTimeRangeChange,
+    onEventPress,
+    renderEvent,
+  } = options;
+
+  const horizontalConfig = useMemo(
+    () => resolveHorizontalConfig(horizontalConfigProp),
+    [horizontalConfigProp],
+  );
+
+  const [displayDate, setDisplayDateState] = useState(initialDate);
+  const [selectedDate, setSelectedDateState] = useState<Date | null>(null);
+  const [layout, setLayoutState] = useState<CalendarLayout>(
+    initialLayout ?? initialView ?? 'horizontal',
+  );
+  const [timeRange, setTimeRangeState] = useState<CalendarTimeRange>(initialTimeRange);
+
+  const setDisplayDate = useCallback(
+    (date: Date) => {
+      setDisplayDateState(date);
+      onMonthChange?.(date.getFullYear(), date.getMonth());
+    },
+    [onMonthChange],
+  );
+
+  const setSelectedDate = useCallback(
+    (date: Date) => {
+      setSelectedDateState(date);
+      onDateSelect?.(date);
+    },
+    [onDateSelect],
+  );
+
+  const setLayout = useCallback(
+    (newLayout: CalendarLayout) => {
+      setLayoutState(newLayout);
+      onViewChange?.(newLayout);
+    },
+    [onViewChange],
+  );
+
+  const setTimeRange = useCallback(
+    (newTimeRange: CalendarTimeRange) => {
+      setTimeRangeState(newTimeRange);
+      onTimeRangeChange?.(newTimeRange);
+    },
+    [onTimeRangeChange],
+  );
+
+  const navigateMonth = useCallback(
+    (direction: 1 | -1) => {
+      setDisplayDate(addMonths(displayDate, direction));
+    },
+    [displayDate, setDisplayDate],
+  );
+
+  const navigateWeek = useCallback(
+    (direction: 1 | -1) => {
+      setDisplayDate(addDays(displayDate, direction * 7));
+    },
+    [displayDate, setDisplayDate],
+  );
+
+  const navigateDay = useCallback(
+    (direction: 1 | -1) => {
+      setDisplayDate(addDays(displayDate, direction));
+    },
+    [displayDate, setDisplayDate],
+  );
+
+  const getEventsForDate = useCallback(
+    (date: Date) => {
+      return events.filter((e) => isSameDay(e.start, date));
+    },
+    [events],
+  );
+
+  const getEventsForMember = useCallback(
+    (memberId: string, date: Date) => {
+      return events.filter(
+        (e) => e.memberId === memberId && isSameDay(e.start, date),
+      );
+    },
+    [events],
+  );
+
+  return useMemo(
+    () => ({
+      currentDate: new Date(),
+      displayDate,
+      layout,
+      timeRange,
+      view: layout,
+      events,
+      members,
+      horizontalConfig,
+      selectedDate,
+      setSelectedDate,
+      setDisplayDate,
+      setLayout,
+      setTimeRange,
+      setView: setLayout,
+      navigateMonth,
+      navigateWeek,
+      navigateDay,
+      getEventsForDate,
+      getEventsForMember,
+      onEventPress,
+      renderEvent,
+    }),
+    [
+      displayDate,
+      layout,
+      timeRange,
+      events,
+      members,
+      horizontalConfig,
+      selectedDate,
+      setSelectedDate,
+      setDisplayDate,
+      setLayout,
+      setTimeRange,
+      navigateMonth,
+      navigateWeek,
+      navigateDay,
+      getEventsForDate,
+      getEventsForMember,
+      onEventPress,
+      renderEvent,
+    ],
+  );
+}