@wireservers-ui/react-natives 0.1.0

package/src/button/styles.ts

@@ -0,0 +1,250 @@
+import { tv } from 'tailwind-variants';
+
+export const buttonStyle = tv({
+  base: 'group/button rounded bg-primary-500 self-start flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40 gap-2',
+  variants: {
+    action: {
+      primary:
+        'bg-primary-500 data-[hover=true]:bg-primary-600 data-[active=true]:bg-primary-700 border-primary-300 data-[hover=true]:border-primary-400 data-[active=true]:border-primary-500 data-[focus-visible=true]:web:ring-indicator-info',
+      secondary:
+        'bg-secondary-500 border-secondary-300 data-[hover=true]:bg-secondary-600 data-[hover=true]:border-secondary-400 data-[active=true]:bg-secondary-700 data-[active=true]:border-secondary-700 data-[focus-visible=true]:web:ring-indicator-info',
+      positive:
+        'bg-success-500 border-success-300 data-[hover=true]:bg-success-600 data-[hover=true]:border-success-400 data-[active=true]:bg-success-700 data-[active=true]:border-success-500 data-[focus-visible=true]:web:ring-indicator-info',
+      negative:
+        'bg-error-500 border-error-300 data-[hover=true]:bg-error-600 data-[hover=true]:border-error-400 data-[active=true]:bg-error-700 data-[active=true]:border-error-500 data-[focus-visible=true]:web:ring-indicator-info',
+      default:
+        'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
+    },
+    variant: {
+      link: 'px-0',
+      outline:
+        'bg-transparent border data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
+      solid: '',
+    },
+    size: {
+      xs: 'px-3.5 h-8',
+      sm: 'px-4 h-9',
+      md: 'px-5 h-10',
+      lg: 'px-6 h-11',
+      xl: 'px-7 h-12',
+    },
+  },
+  compoundVariants: [
+    {
+      action: 'primary',
+      variant: 'link',
+      class:
+        'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent',
+    },
+    {
+      action: 'secondary',
+      variant: 'link',
+      class:
+        'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent',
+    },
+    {
+      action: 'positive',
+      variant: 'link',
+      class:
+        'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent',
+    },
+    {
+      action: 'negative',
+      variant: 'link',
+      class:
+        'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent',
+    },
+    {
+      action: 'primary',
+      variant: 'outline',
+      class:
+        'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
+    },
+    {
+      action: 'secondary',
+      variant: 'outline',
+      class:
+        'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
+    },
+    {
+      action: 'positive',
+      variant: 'outline',
+      class:
+        'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
+    },
+    {
+      action: 'negative',
+      variant: 'outline',
+      class:
+        'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent',
+    },
+  ],
+});
+
+export const buttonTextStyle = tv({
+  base: 'text-typography-0 font-semibold web:select-none',
+  variants: {
+    action: {
+      primary:
+        'text-primary-600 data-[hover=true]:text-primary-600 data-[active=true]:text-primary-700',
+      secondary:
+        'text-typography-500 data-[hover=true]:text-typography-600 data-[active=true]:text-typography-700',
+      positive:
+        'text-success-600 data-[hover=true]:text-success-600 data-[active=true]:text-success-700',
+      negative:
+        'text-error-600 data-[hover=true]:text-error-600 data-[active=true]:text-error-700',
+      default:
+        'text-typography-700 data-[hover=true]:text-typography-800 data-[active=true]:text-typography-900',
+    },
+    variant: {
+      link: 'data-[hover=true]:underline data-[active=true]:underline',
+      outline: '',
+      solid:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    size: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'solid',
+      action: 'primary',
+      class:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'secondary',
+      class:
+        'text-typography-800 data-[hover=true]:text-typography-800 data-[active=true]:text-typography-800',
+    },
+    {
+      variant: 'solid',
+      action: 'positive',
+      class:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'negative',
+      class:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    {
+      variant: 'outline',
+      action: 'primary',
+      class:
+        'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500',
+    },
+    {
+      variant: 'outline',
+      action: 'secondary',
+      class:
+        'text-typography-500 data-[hover=true]:text-primary-600 data-[active=true]:text-typography-700',
+    },
+    {
+      variant: 'outline',
+      action: 'positive',
+      class:
+        'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500',
+    },
+    {
+      variant: 'outline',
+      action: 'negative',
+      class:
+        'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500',
+    },
+    {
+      variant: 'outline',
+      action: 'default',
+      class:
+        'text-typography-700 data-[hover=true]:text-typography-800 data-[active=true]:text-typography-900',
+    },
+  ],
+});
+
+export const buttonIconStyle = tv({
+  base: 'fill-none',
+  variants: {
+    variant: {
+      link: 'data-[hover=true]:underline data-[active=true]:underline',
+      outline: '',
+      solid:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    size: {
+      xs: 'h-3.5 w-3.5',
+      sm: 'h-4 w-4',
+      md: 'h-[18px] w-[18px]',
+      lg: 'h-[18px] w-[18px]',
+      xl: 'h-5 w-5',
+    },
+    action: {
+      primary:
+        'text-primary-600 data-[hover=true]:text-primary-600 data-[active=true]:text-primary-700',
+      secondary:
+        'text-typography-500 data-[hover=true]:text-typography-600 data-[active=true]:text-typography-700',
+      positive:
+        'text-success-600 data-[hover=true]:text-success-600 data-[active=true]:text-success-700',
+      negative:
+        'text-error-600 data-[hover=true]:text-error-600 data-[active=true]:text-error-700',
+      default: '',
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'solid',
+      action: 'primary',
+      class:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'secondary',
+      class:
+        'text-typography-800 data-[hover=true]:text-typography-800 data-[active=true]:text-typography-800',
+    },
+    {
+      variant: 'solid',
+      action: 'positive',
+      class:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+    {
+      variant: 'solid',
+      action: 'negative',
+      class:
+        'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0',
+    },
+  ],
+});
+
+export const buttonGroupStyle = tv({
+  base: '',
+  variants: {
+    space: {
+      'xs': 'gap-1',
+      'sm': 'gap-2',
+      'md': 'gap-3',
+      'lg': 'gap-4',
+      'xl': 'gap-5',
+      '2xl': 'gap-6',
+      '3xl': 'gap-7',
+      '4xl': 'gap-8',
+    },
+    isAttached: {
+      true: 'gap-0',
+    },
+    flexDirection: {
+      'row': 'flex-row',
+      'column': 'flex-col',
+      'row-reverse': 'flex-row-reverse',
+      'column-reverse': 'flex-col-reverse',
+    },
+  },
+});

package/src/button/types.ts

@@ -0,0 +1,67 @@
+import type { Pressable, Text, View, ActivityIndicator } from 'react-native';
+
+export type ButtonAction =
+  | 'primary'
+  | 'secondary'
+  | 'positive'
+  | 'negative'
+  | 'default';
+export type ButtonVariant = 'link' | 'outline' | 'solid';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface ButtonContextValue {
+  action: ButtonAction;
+  variant: ButtonVariant;
+  size: ButtonSize;
+}
+
+export interface ButtonProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  action?: ButtonAction;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  isDisabled?: boolean;
+}
+
+export interface ButtonTextProps
+  extends React.ComponentPropsWithoutRef<typeof Text> {
+  className?: string;
+  action?: ButtonAction;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+export interface ButtonSpinnerProps
+  extends React.ComponentPropsWithoutRef<typeof ActivityIndicator> {}
+
+export interface ButtonIconProps {
+  className?: string;
+  as?: React.ElementType;
+  size?: ButtonSize | number;
+  height?: number;
+  width?: number;
+}
+
+export type ButtonGroupSpace =
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl';
+export type ButtonGroupDirection =
+  | 'row'
+  | 'column'
+  | 'row-reverse'
+  | 'column-reverse';
+
+export interface ButtonGroupProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  space?: ButtonGroupSpace;
+  isAttached?: boolean;
+  flexDirection?: ButtonGroupDirection;
+}

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

@@ -0,0 +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';

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

@@ -0,0 +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';

package/src/calendar/calendar-event.tsx

@@ -0,0 +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';

package/src/calendar/calendar-header.tsx

@@ -0,0 +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';