@ecohouse/ui 0.1.3 → 0.1.5

package/src/icons/registry.ts

@@ -2,22 +2,31 @@ import { ArrowRightIcon } from "./ArrowRight";
 import { BagIcon } from "./Bag";
 import { BellIcon } from "./Bell";
 import { BuildingIcon } from "./Building";
+import { CalendarIcon } from "./Calendar";
+import { CalendarOutlineIcon } from "./CalendarOutline";
 import { CameraIcon } from "./Camera";
 import { CheckIcon } from "./Check";
 import { CheckBadgeIcon } from "./CheckBadge";
 import { ChevronDownIcon } from "./ChevronDown";
+import { ChevronLeftIcon } from "./ChevronLeft";
 import { ClockIcon } from "./Clock";
 import { FacebookIcon } from "./Facebook";
+import { HeartIcon } from "./Heart";
+import { HelpCircleIcon } from "./HelpCircle";
 import { HomeIcon } from "./Home";
 import { InstagramIcon } from "./Instagram";
 import { KeyIcon } from "./Key";
+import { LayoutGridIcon } from "./LayoutGrid";
 import { LinkedInIcon } from "./LinkedIn";
+import { LogOutIcon } from "./LogOut";
 import { MailIcon } from "./Mail";
 import { NavigateIcon } from "./Navigate";
 import { PhoneIcon } from "./Phone";
 import { SearchIcon } from "./Search";
+import { SettingsIcon } from "./Settings";
 import { ShowIcon } from "./Show";
 import { UserIcon } from "./User";
+import { VideoIcon } from "./Video";
 import type { IconComponent } from "./types";
 
 export const icons = {
@@ -25,22 +34,31 @@ export const icons = {
   bag: BagIcon,
   bell: BellIcon,
   building: BuildingIcon,
+  calendar: CalendarIcon,
+  calendarOutline: CalendarOutlineIcon,
   camera: CameraIcon,
   check: CheckIcon,
   checkBadge: CheckBadgeIcon,
   chevronDown: ChevronDownIcon,
+  chevronLeft: ChevronLeftIcon,
   clock: ClockIcon,
   facebook: FacebookIcon,
+  heart: HeartIcon,
+  helpCircle: HelpCircleIcon,
   home: HomeIcon,
   instagram: InstagramIcon,
   key: KeyIcon,
+  layoutGrid: LayoutGridIcon,
   linkedin: LinkedInIcon,
+  logOut: LogOutIcon,
   mail: MailIcon,
   navigate: NavigateIcon,
   phone: PhoneIcon,
   search: SearchIcon,
+  settings: SettingsIcon,
   show: ShowIcon,
   user: UserIcon,
+  video: VideoIcon,
 } as const satisfies Record<string, IconComponent>;
 
 export type IconName = keyof typeof icons;
@@ -48,11 +66,23 @@ export type IconName = keyof typeof icons;
 export const iconNames = Object.keys(icons) as IconName[];
 
 export const iconGroups = {
-  navigation: ["arrowRight", "chevronDown", "home", "navigate"],
-  actions: ["show", "bell", "camera", "key", "check", "checkBadge", "search"],
-  objects: ["bag", "building", "clock", "user"],
+  navigation: ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"],
+  actions: [
+    "show",
+    "bell",
+    "camera",
+    "key",
+    "check",
+    "checkBadge",
+    "search",
+    "calendar",
+    "calendarOutline",
+    "heart",
+  ],
+  objects: ["bag", "building", "clock", "user", "video"],
   communication: ["mail", "phone"],
   social: ["facebook", "instagram", "linkedin"],
+  interface: ["layoutGrid", "settings", "helpCircle", "logOut"],
 } as const satisfies Record<string, readonly IconName[]>;
 
 export type IconGroup = keyof typeof iconGroups;

package/src/index.ts

@@ -1,10 +1,25 @@
-export { Button, Checkbox, Input, Select, Textarea, Toggle } from "./components";
+export {
+  Avatar,
+  Button,
+  Checkbox,
+  DatePicker,
+  Input,
+  Select,
+  Textarea,
+  Toggle,
+} from "./components";
 export type {
+  AvatarProps,
+  AvatarMenuItem,
   ButtonProps,
   ButtonSize,
   ButtonVariant,
   CheckboxProps,
   CheckboxVariant,
+  DatePickerProps,
+  DatePickerSingleProps,
+  DatePickerRangeProps,
+  DateRange,
   InputProps,
   InputSize,
   SelectOption,
@@ -15,6 +30,9 @@ export type {
   ToggleProps,
 } from "./components";
 
+export { MenuItem } from "./primitives";
+export type { MenuItemProps } from "./primitives";
+
 export {
   Icon,
   icons,
@@ -26,29 +44,40 @@ export {
   BagIcon,
   BellIcon,
   BuildingIcon,
+  CalendarIcon,
+  CalendarOutlineIcon,
   CameraIcon,
   CheckIcon,
   CheckBadgeIcon,
   ChevronDownIcon,
+  ChevronLeftIcon,
   ClockIcon,
   FacebookIcon,
+  HeartIcon,
+  HelpCircleIcon,
   HomeIcon,
   InstagramIcon,
   KeyIcon,
+  LayoutGridIcon,
   LinkedInIcon,
+  LogOutIcon,
   MailIcon,
   NavigateIcon,
   PhoneIcon,
   SearchIcon,
+  SettingsIcon,
   ShowIcon,
   UserIcon,
+  VideoIcon,
 } from "./icons";
 export type { IconProps, IconName, IconGroup, IconComponent, IconByNameProps } from "./icons";
 
 export {
   colors,
   grey,
+  avatarTypography,
   buttonTypography,
+  datePickerTypography,
   inputTypography,
   selectTypography,
   textareaTypography,

package/src/primitives/MenuItem/MenuItem.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { View, StyleSheet } from "react-native";
+import { MenuItem } from "./MenuItem";
+import {
+  CalendarIcon,
+  HeartIcon,
+  HelpCircleIcon,
+  LayoutGridIcon,
+  LogOutIcon,
+  SettingsIcon,
+  VideoIcon,
+} from "../../icons";
+import { colors } from "../../theme";
+
+const meta = {
+  title: "Primitives/MenuItem",
+  component: MenuItem,
+  args: {
+    label: "Bookings",
+    icon: <CalendarIcon size={16} />,
+    onPress: fn(),
+    disabled: false,
+  },
+  argTypes: {
+    disabled: { control: "boolean" },
+    backgroundColor: { control: "color" },
+    hoverColor: { control: "color" },
+    onPress: { action: "pressed" },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+  decorators: [
+    (Story) => (
+      <View style={storyStyles.frame}>
+        <Story />
+      </View>
+    ),
+  ],
+} satisfies Meta<typeof MenuItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithoutIcon: Story = {
+  args: { icon: undefined },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+/** Optional resting / hover colors — transparent + grey600 by default. */
+export const CustomColors: Story = {
+  args: {
+    label: "Log out",
+    icon: <LogOutIcon size={16} />,
+    backgroundColor: colors.redMuted,
+    hoverColor: colors.redHover,
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={storyStyles.column}>
+      <MenuItem label="Bookings" icon={<CalendarIcon size={16} />} onPress={fn()} />
+      <MenuItem label="Digital keys" icon={<LayoutGridIcon size={16} />} onPress={fn()} />
+      <MenuItem label="Cameras" icon={<VideoIcon size={16} />} onPress={fn()} />
+      <MenuItem label="Favorites" icon={<HeartIcon size={16} />} onPress={fn()} />
+      <MenuItem label="Support" icon={<HelpCircleIcon size={16} />} onPress={fn()} />
+      <MenuItem label="Settings" icon={<SettingsIcon size={16} />} onPress={fn()} />
+      <MenuItem
+        label="Log out"
+        icon={<LogOutIcon size={16} />}
+        onPress={fn()}
+        backgroundColor={colors.redMuted}
+        hoverColor={colors.redHover}
+      />
+      <MenuItem label="Disabled" icon={<SettingsIcon size={16} />} disabled onPress={fn()} />
+    </View>
+  ),
+};
+
+const storyStyles = StyleSheet.create({
+  frame: {
+    width: 282,
+    padding: 8,
+    borderRadius: 16,
+    gap: 8,
+    backgroundColor: colors.grey700,
+  },
+  column: {
+    gap: 8,
+  },
+});

package/src/primitives/MenuItem/MenuItem.tsx

@@ -0,0 +1,138 @@
+import { forwardRef, useMemo, useRef, useState, type ComponentRef, type ReactNode } from "react";
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type GestureResponderEvent,
+  type PressableProps,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { avatarTypography, colors } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface MenuItemProps extends Omit<
+  PressableProps,
+  "onPress" | "disabled" | "style" | "children" | "hitSlop"
+> {
+  /** Leading icon, e.g. `<CalendarIcon size={16} />` — pass it pre-colored. */
+  icon?: ReactNode;
+  label: string;
+  onPress?: (event: GestureResponderEvent) => void;
+  disabled?: boolean;
+  /** Row background at rest. Defaults to transparent. */
+  backgroundColor?: string;
+  /** Row background on hover/press. Defaults to `colors.grey600`. */
+  hoverColor?: string;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  className?: string;
+  hitSlop?: PressableProps["hitSlop"];
+}
+
+const ITEM_RADIUS = 12;
+const ICON_SIZE = 16;
+
+export const MenuItem = forwardRef<ComponentRef<typeof Pressable>, MenuItemProps>(function MenuItem(
+  {
+    icon,
+    label,
+    onPress,
+    disabled = false,
+    backgroundColor,
+    hoverColor,
+    style,
+    labelStyle,
+    className,
+    accessibilityLabel,
+    hitSlop = 4,
+    onHoverIn,
+    onHoverOut,
+    onPressIn,
+    onPressOut,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof Pressable>>(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const [hovered, setHovered] = useState(false);
+
+  useApplyWebClassName(containerRef, className);
+
+  const resolvedBackground = hovered
+    ? (hoverColor ?? colors.grey600)
+    : (backgroundColor ?? "transparent");
+  const resolvedAccessibilityLabel = accessibilityLabel ?? label;
+
+  return (
+    <Pressable
+      {...rest}
+      ref={setContainerRef}
+      onPress={onPress}
+      disabled={disabled}
+      hitSlop={hitSlop}
+      onHoverIn={(event) => {
+        setHovered(true);
+        onHoverIn?.(event);
+      }}
+      onHoverOut={(event) => {
+        setHovered(false);
+        onHoverOut?.(event);
+      }}
+      onPressIn={(event) => {
+        setHovered(true);
+        onPressIn?.(event);
+      }}
+      onPressOut={(event) => {
+        setHovered(false);
+        onPressOut?.(event);
+      }}
+      accessibilityRole="menuitem"
+      accessibilityLabel={resolvedAccessibilityLabel}
+      accessibilityState={{ disabled }}
+      style={[
+        styles.root,
+        { backgroundColor: resolvedBackground },
+        disabled && styles.disabled,
+        style,
+      ]}
+    >
+      {icon ? <View style={styles.iconSlot}>{icon}</View> : null}
+      <Text style={[styles.label, labelStyle]} numberOfLines={1}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    minHeight: 40,
+    borderRadius: ITEM_RADIUS,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    alignSelf: "stretch",
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  iconSlot: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  label: {
+    ...avatarTypography.menuItem,
+    color: colors.white,
+    flex: 1,
+  },
+});

package/src/primitives/MenuItem/index.ts

@@ -0,0 +1,2 @@
+export { MenuItem } from "./MenuItem";
+export type { MenuItemProps } from "./MenuItem";

package/src/primitives/index.ts

@@ -0,0 +1,2 @@
+export { MenuItem } from "./MenuItem";
+export type { MenuItemProps } from "./MenuItem";

package/src/theme/colors.ts

@@ -26,7 +26,9 @@ export const colors = {
   red: "#A63E3E",
   lightGrey: "#B7B7B7",
   primaryMuted: "#B464360F",
+  primaryHover: "#B4643633",
   redMuted: "#A63E3E0F",
+  redHover: "#A63E3E33",
 
   grey0: grey["0"],
   grey50: grey["0.5"],

package/src/theme/index.ts

@@ -3,7 +3,9 @@ export type { GreyStep } from "./colors";
 
 export {
   fonts,
+  avatarTypography,
   buttonTypography,
+  datePickerTypography,
   inputTypography,
   selectTypography,
   textareaTypography,

package/src/theme/typography.ts

@@ -70,6 +70,71 @@ export const selectTypography = {
   },
 } as const;
 
+/** Avatar name / email / menu-item typography — 100% line-height, 0 letter-spacing. */
+export const avatarTypography = {
+  name: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "600" as const,
+    lineHeight: 14,
+    letterSpacing: 0,
+  },
+  email: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400" as const,
+    lineHeight: 12,
+    letterSpacing: 0,
+  },
+  menuItem: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "600" as const,
+    lineHeight: 12,
+    letterSpacing: 0,
+  },
+} as const;
+
+/**
+ * DatePicker typography — trigger field text plus the calendar-panel type
+ * (month heading, weekday header, day-cell numbers). No label/hint chrome —
+ * the Figma trigger is a standalone field. Figma didn't spec the month
+ * heading / day-cell number sizes, so those reuse the existing type scale
+ * for visual consistency with the rest of the kit.
+ */
+export const datePickerTypography = {
+  field: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400" as const,
+    lineHeight: 12,
+    letterSpacing: 0.36,
+  },
+  /** Calendar month/year heading — Bold, centered, White. */
+  monthHeading: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "700" as const,
+    lineHeight: 14,
+    letterSpacing: 0,
+  },
+  /** Weekday header (ԵՐ, ԵՔ, ...) — Regular, uppercase, centered, Grey/300. */
+  weekday: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400" as const,
+    lineHeight: 12,
+    letterSpacing: 0,
+  },
+  day: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400" as const,
+    lineHeight: 14,
+    letterSpacing: 0,
+  },
+} as const;
+
 /** Textarea label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
 export const textareaTypography = {
   label: {

package/src/utils/dateUtils.ts

@@ -0,0 +1,86 @@
+/**
+ * Small, dependency-free date helpers for the DatePicker component. These only
+ * ever operate on local calendar days (time-of-day is ignored/zeroed) so
+ * comparisons stay simple and predictable across the whole component.
+ */
+
+export function startOfDay(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+export function isSameDay(a: Date | null | undefined, b: Date | null | undefined): boolean {
+  if (a == null || b == null) return false;
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+export function isSameMonth(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+
+export function addMonths(date: Date, amount: number): Date {
+  return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+
+export function isBefore(a: Date, b: Date): boolean {
+  return startOfDay(a).getTime() < startOfDay(b).getTime();
+}
+
+export function isAfter(a: Date, b: Date): boolean {
+  return startOfDay(a).getTime() > startOfDay(b).getTime();
+}
+
+export function isWithinRange(date: Date, start: Date, end: Date): boolean {
+  const time = startOfDay(date).getTime();
+  return time >= startOfDay(start).getTime() && time <= startOfDay(end).getTime();
+}
+
+export function clampDate(date: Date, min?: Date | null, max?: Date | null): Date {
+  if (min && isBefore(date, min)) return startOfDay(min);
+  if (max && isAfter(date, max)) return startOfDay(max);
+  return startOfDay(date);
+}
+
+export function isDateDisabled(date: Date, min?: Date | null, max?: Date | null): boolean {
+  if (min && isBefore(date, min)) return true;
+  if (max && isAfter(date, max)) return true;
+  return false;
+}
+
+/** Zero-padded "DD.MM.YYYY" — matches the Figma reference formatting. */
+export function formatDate(date: Date): string {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  return `${day}.${month}.${date.getFullYear()}`;
+}
+
+/**
+ * Builds a 6×7 grid of calendar days for the month containing `monthDate`,
+ * including the leading/trailing days from adjacent months needed to fill
+ * whole weeks. `weekStartsOn` follows the JS `Date#getDay()` convention
+ * (0 = Sunday, 1 = Monday, ...).
+ */
+export function getMonthMatrix(monthDate: Date, weekStartsOn: 0 | 1 = 1): Date[][] {
+  const year = monthDate.getFullYear();
+  const month = monthDate.getMonth();
+  const firstOfMonth = new Date(year, month, 1);
+
+  const firstWeekday = firstOfMonth.getDay();
+  const leadingDays = (firstWeekday - weekStartsOn + 7) % 7;
+  const gridStart = new Date(year, month, 1 - leadingDays);
+
+  const weeks: Date[][] = [];
+  let cursor = gridStart;
+  for (let week = 0; week < 6; week += 1) {
+    const days: Date[] = [];
+    for (let day = 0; day < 7; day += 1) {
+      days.push(cursor);
+      cursor = new Date(cursor.getFullYear(), cursor.getMonth(), cursor.getDate() + 1);
+    }
+    weeks.push(days);
+  }
+  return weeks;
+}