@ecohouse/ui 0.1.56 → 0.1.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.56",
+  "version": "0.1.58",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/NotificationStatus/NotificationStatus.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StyleSheet, View } from "react-native";
+import { colors } from "../../theme";
+import {
+  BookingWarningNotification,
+  CancelledBookingNotification,
+  GuestCheckInNotification,
+  NewBookingNotification,
+  NotificationStatusSkeleton,
+  QrKeyNotification,
+} from "./NotificationStatus";
+
+const meta = {
+  title: "Components/Notification Statuses",
+  component: NewBookingNotification,
+  args: {
+    title: "Նոր ամրագրում",
+    description: "Արմեն Գրիգորյանը ամրագրեց «Լեռնային Ռեզիդենցիա» (Օգս 28 - Օգս 30):",
+    timestamp: "2 ժ առաջ",
+    unread: true,
+    onPress: () => undefined,
+  },
+  decorators: [
+    (Story) => (
+      <View style={styles.frame}>
+        <Story />
+      </View>
+    ),
+  ],
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+} satisfies Meta<typeof NewBookingNotification>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const NewBooking: Story = {};
+
+export const CancelledBooking: Story = {
+  render: (args) => <CancelledBookingNotification {...args} title="Ամրագրումը չեղարկվել է" />,
+};
+
+export const GuestCheckIn: Story = {
+  render: (args) => <GuestCheckInNotification {...args} title="Հյուրը մուտք գործեց" />,
+};
+
+export const QrKey: Story = {
+  name: "QR Key",
+  render: (args) => <QrKeyNotification {...args} title="QR բանալին ակտիվացված է" />,
+};
+
+export const BookingWarning: Story = {
+  render: (args) => (
+    <BookingWarningNotification {...args} title="Քոթեջն ուշադրություն է պահանջում" />
+  ),
+};
+
+export const Loading: Story = {
+  render: () => <NotificationStatusSkeleton />,
+};
+
+export const AllStatuses: Story = {
+  render: (args) => (
+    <View>
+      <NewBookingNotification {...args} />
+      <CancelledBookingNotification {...args} title="Ամրագրումը չեղարկվել է" />
+      <GuestCheckInNotification {...args} title="Հյուրը մուտք գործեց" />
+      <QrKeyNotification {...args} title="QR բանալին ակտիվացված է" unread={false} />
+      <BookingWarningNotification
+        {...args}
+        title="Քոթեջն ուշադրություն է պահանջում"
+        unread={false}
+      />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  frame: {
+    width: 460,
+    overflow: "hidden",
+    borderRadius: 16,
+    backgroundColor: colors.grey750,
+  },
+});

package/src/components/NotificationStatus/NotificationStatus.tsx

@@ -0,0 +1,255 @@
+import { useState, type ReactNode } from "react";
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import {
+  ChevronRightIcon,
+  NotificationCancelledIcon,
+  NotificationCheckoutIcon,
+  NotificationQrCodeIcon,
+  NotificationSuccessIcon,
+  NotificationWarningIcon,
+} from "../../icons";
+import { colors, fonts } from "../../theme";
+
+export interface NotificationStatusProps extends Omit<
+  PressableProps,
+  "children" | "disabled" | "onPress" | "style"
+> {
+  title: string;
+  description: string;
+  timestamp: string;
+  unread?: boolean;
+  disabled?: boolean;
+  showChevron?: boolean;
+  onPress?: PressableProps["onPress"];
+  style?: StyleProp<ViewStyle>;
+}
+
+export function NewBookingNotification(props: NotificationStatusProps) {
+  return <NotificationStatus icon={<NotificationSuccessIcon />} {...props} />;
+}
+
+export function CancelledBookingNotification(props: NotificationStatusProps) {
+  return <NotificationStatus icon={<NotificationCancelledIcon />} {...props} />;
+}
+
+export function GuestCheckInNotification(props: NotificationStatusProps) {
+  return <NotificationStatus icon={<NotificationCheckoutIcon />} {...props} />;
+}
+
+export function QrKeyNotification(props: NotificationStatusProps) {
+  return <NotificationStatus icon={<NotificationQrCodeIcon />} {...props} />;
+}
+
+export function BookingWarningNotification(props: NotificationStatusProps) {
+  return <NotificationStatus icon={<NotificationWarningIcon />} {...props} />;
+}
+
+export function NotificationStatusSkeleton() {
+  return (
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={styles.root}
+    >
+      <View style={[styles.icon, styles.skeletonIcon]} />
+      <View style={[styles.content, styles.skeletonContent]}>
+        <View style={[styles.skeletonLine, styles.skeletonTitle]} />
+        <View style={styles.skeletonDescription}>
+          <View style={[styles.skeletonLine, styles.skeletonDescriptionFirst]} />
+          <View style={[styles.skeletonLine, styles.skeletonDescriptionSecond]} />
+        </View>
+        <View style={[styles.skeletonLine, styles.skeletonTimestamp]} />
+      </View>
+      <View style={[styles.chevron, styles.skeletonChevron]} />
+    </View>
+  );
+}
+
+function NotificationStatus({
+  icon,
+  title,
+  description,
+  timestamp,
+  unread = false,
+  disabled = false,
+  showChevron,
+  onPress,
+  style,
+  accessibilityLabel,
+  onHoverIn,
+  onHoverOut,
+  onPressIn,
+  onPressOut,
+  ...rest
+}: NotificationStatusProps & { icon: ReactNode }) {
+  const [active, setActive] = useState(false);
+  const interactive = onPress !== undefined;
+
+  return (
+    <Pressable
+      {...rest}
+      accessibilityLabel={accessibilityLabel ?? `${title}. ${description}. ${timestamp}`}
+      accessibilityRole={interactive ? "button" : undefined}
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      onPress={onPress}
+      onHoverIn={(event) => {
+        setActive(true);
+        onHoverIn?.(event);
+      }}
+      onHoverOut={(event) => {
+        setActive(false);
+        onHoverOut?.(event);
+      }}
+      onPressIn={(event) => {
+        setActive(true);
+        onPressIn?.(event);
+      }}
+      onPressOut={(event) => {
+        setActive(false);
+        onPressOut?.(event);
+      }}
+      style={[styles.root, active && styles.rootActive, disabled && styles.disabled, style]}
+    >
+      <View style={styles.icon}>{icon}</View>
+      <View style={styles.content}>
+        <View style={styles.titleRow}>
+          {unread ? <View style={styles.unreadIndicator} /> : null}
+          <Text numberOfLines={1} style={styles.title}>
+            {title}
+          </Text>
+        </View>
+        <Text style={styles.description}>{description}</Text>
+        <Text numberOfLines={1} style={styles.timestamp}>
+          {timestamp}
+        </Text>
+      </View>
+      {(showChevron ?? interactive) ? (
+        <View
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          style={styles.chevron}
+        >
+          <ChevronRightIcon color={colors.grey300} size={16} strokeWidth={1.5} />
+        </View>
+      ) : null}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    width: "100%",
+    minHeight: 111,
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 16,
+    padding: 16,
+    backgroundColor: "transparent",
+  },
+  rootActive: {
+    backgroundColor: colors.whiteAlpha1,
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+  icon: {
+    width: 44,
+    height: 44,
+    flexShrink: 0,
+  },
+  content: {
+    minWidth: 0,
+    flex: 1,
+    alignSelf: "stretch",
+    justifyContent: "space-between",
+  },
+  titleRow: {
+    minWidth: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+  },
+  unreadIndicator: {
+    width: 8,
+    height: 8,
+    flexShrink: 0,
+    borderRadius: 4,
+    backgroundColor: colors.primaryLight,
+  },
+  title: {
+    minWidth: 0,
+    flex: 1,
+    color: colors.white,
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "600",
+    lineHeight: 14,
+    letterSpacing: 0,
+  },
+  description: {
+    color: colors.lightGrey,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 16,
+    letterSpacing: 0,
+  },
+  timestamp: {
+    color: colors.grey50,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 16,
+    letterSpacing: 0,
+  },
+  chevron: {
+    alignSelf: "center",
+    flexShrink: 0,
+  },
+  skeletonIcon: {
+    borderRadius: 22,
+    backgroundColor: colors.grey600,
+  },
+  skeletonContent: {
+    paddingTop: 1,
+    paddingBottom: 2,
+  },
+  skeletonLine: {
+    borderRadius: 999,
+    backgroundColor: colors.grey500,
+  },
+  skeletonTitle: {
+    width: "42%",
+    height: 12,
+  },
+  skeletonDescription: {
+    gap: 5,
+  },
+  skeletonDescriptionFirst: {
+    width: "92%",
+    height: 10,
+  },
+  skeletonDescriptionSecond: {
+    width: "68%",
+    height: 10,
+  },
+  skeletonTimestamp: {
+    width: 58,
+    height: 10,
+  },
+  skeletonChevron: {
+    width: 7,
+    height: 12,
+    borderRadius: 4,
+    backgroundColor: colors.grey500,
+  },
+});

package/src/components/NotificationStatus/index.ts

@@ -0,0 +1,9 @@
+export {
+  BookingWarningNotification,
+  CancelledBookingNotification,
+  GuestCheckInNotification,
+  NewBookingNotification,
+  NotificationStatusSkeleton,
+  QrKeyNotification,
+} from "./NotificationStatus";
+export type { NotificationStatusProps } from "./NotificationStatus";

package/src/components/StatusIndicator/StatusIndicator.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StyleSheet, View } from "react-native";
+import { StatusIndicator } from "./StatusIndicator";
+
+const meta = {
+  title: "Components/StatusIndicator",
+  component: StatusIndicator,
+  args: { label: "Ակտիվ է", status: "active" },
+  parameters: { backgrounds: { default: "black" } },
+} satisfies Meta<typeof StatusIndicator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Active: Story = {};
+
+export const AllStatuses: Story = {
+  render: () => (
+    <View style={styles.column}>
+      <StatusIndicator label="Ակտիվ է" status="active" />
+      <StatusIndicator label="Սպասվող" status="pending" />
+      <StatusIndicator label="Ավարտված" status="completed" />
+      <StatusIndicator label="Չեղարկված" status="cancelled" />
+      <StatusIndicator label="Ապաակտիվ է" status="inactive" />
+      <StatusIndicator label="Հասանելի չէ" status="unavailable" />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  column: {
+    gap: 16,
+    padding: 24,
+    backgroundColor: "#090909",
+  },
+});

package/src/components/StatusIndicator/StatusIndicator.tsx

@@ -0,0 +1,105 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export type StatusIndicatorStatus =
+  "active" | "pending" | "completed" | "cancelled" | "inactive" | "unavailable";
+
+export interface StatusIndicatorProps extends Omit<ViewProps, "style" | "children"> {
+  status: StatusIndicatorStatus;
+  label: string;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const statusColors: Record<Exclude<StatusIndicatorStatus, "unavailable">, string> = {
+  active: colors.green,
+  pending: colors.primary,
+  completed: colors.grey0,
+  cancelled: colors.red,
+  inactive: colors.primary,
+};
+
+export const StatusIndicator = forwardRef<ComponentRef<typeof View>, StatusIndicatorProps>(
+  function StatusIndicator(
+    { status, label, style, className, accessibilityLabel, ...rest },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const indicatorColor = status === "unavailable" ? null : statusColors[status];
+
+    useApplyWebClassName(containerRef, className);
+
+    return (
+      <View
+        {...rest}
+        ref={setContainerRef}
+        accessibilityRole="text"
+        accessibilityLabel={accessibilityLabel ?? label}
+        style={[styles.container, style]}
+      >
+        {indicatorColor ? (
+          <View style={[styles.indicatorOuter, { backgroundColor: `${indicatorColor}1F` }]}>
+            <View style={[styles.indicatorMiddle, { backgroundColor: `${indicatorColor}52` }]}>
+              <View style={[styles.indicatorInner, { backgroundColor: indicatorColor }]} />
+            </View>
+          </View>
+        ) : null}
+        <Text style={[styles.label, Platform.OS === "android" ? styles.labelAndroid : null]}>
+          {label}
+        </Text>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 8,
+  },
+  indicatorOuter: {
+    width: 14,
+    height: 14,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 7,
+  },
+  indicatorMiddle: {
+    width: 10,
+    height: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 5,
+  },
+  indicatorInner: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  label: {
+    color: colors.white,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "500",
+    lineHeight: 12,
+    letterSpacing: 0,
+  },
+  labelAndroid: {
+    includeFontPadding: false,
+  },
+});

package/src/components/StatusIndicator/index.ts

@@ -0,0 +1,2 @@
+export { StatusIndicator } from "./StatusIndicator";
+export type { StatusIndicatorProps, StatusIndicatorStatus } from "./StatusIndicator";

package/src/components/index.ts

@@ -13,6 +13,9 @@ export type { BadgeProps, BadgeVariant } from "./Badge";
 export { StatusBadge } from "./StatusBadge";
 export type { StatusBadgeProps, StatusBadgeTone } from "./StatusBadge";
 
+export { StatusIndicator } from "./StatusIndicator";
+export type { StatusIndicatorProps, StatusIndicatorStatus } from "./StatusIndicator";
+
 export { PaginationDots } from "./PaginationDots";
 export type { PaginationDotsProps } from "./PaginationDots";
 
@@ -116,6 +119,16 @@ export type { RatingInputProps } from "./RatingInput";
 export { CommentCard } from "./CommentCard";
 export type { CommentCardProps } from "./CommentCard";
 
+export {
+  BookingWarningNotification,
+  CancelledBookingNotification,
+  GuestCheckInNotification,
+  NewBookingNotification,
+  NotificationStatusSkeleton,
+  QrKeyNotification,
+} from "./NotificationStatus";
+export type { NotificationStatusProps } from "./NotificationStatus";
+
 export { Range } from "./Range";
 export type { RangeProps, RangeValue } from "./Range";
 

package/src/icons/ChevronRight/ChevronRightIcon.tsx

@@ -0,0 +1,25 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { CHEVRON_RIGHT_PATH } from "./chevronRightPath";
+
+export { CHEVRON_RIGHT_PATH } from "./chevronRightPath";
+
+/** Native — react-native-svg (peer dependency). */
+export function ChevronRightIcon({
+  size = 16,
+  color = colors.grey100,
+  strokeWidth = 1.5,
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d={CHEVRON_RIGHT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/ChevronRight/ChevronRightIcon.web.tsx

@@ -0,0 +1,31 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { CHEVRON_RIGHT_PATH } from "./chevronRightPath";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function ChevronRightIcon({
+  size = 16,
+  color = colors.grey100,
+  strokeWidth = 1.5,
+}: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CHEVRON_RIGHT_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { CHEVRON_RIGHT_PATH } from "./chevronRightPath";

package/src/icons/ChevronRight/chevronRightPath.ts

@@ -0,0 +1,2 @@
+/** Chevron right path — 16×16 viewBox. */
+export const CHEVRON_RIGHT_PATH = "M6 12L10 8L6 4";

package/src/icons/ChevronRight/index.ts

@@ -0,0 +1 @@
+export { ChevronRightIcon, CHEVRON_RIGHT_PATH } from "./ChevronRightIcon";

package/src/icons/DoubleCheck/DoubleCheckIcon.tsx

@@ -0,0 +1,25 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { DOUBLE_CHECK_PATH } from "./doubleCheckPath";
+
+export { DOUBLE_CHECK_PATH } from "./doubleCheckPath";
+
+/** Native — react-native-svg (peer dependency). */
+export function DoubleCheckIcon({
+  size = 16,
+  color = colors.primary,
+  strokeWidth = 1.5,
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d={DOUBLE_CHECK_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/DoubleCheck/DoubleCheckIcon.web.tsx

@@ -0,0 +1,31 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { DOUBLE_CHECK_PATH } from "./doubleCheckPath";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function DoubleCheckIcon({
+  size = 16,
+  color = colors.primary,
+  strokeWidth = 1.5,
+}: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={DOUBLE_CHECK_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { DOUBLE_CHECK_PATH } from "./doubleCheckPath";

package/src/icons/DoubleCheck/doubleCheckPath.ts

@@ -0,0 +1,3 @@
+/** Double check path — 16×16 viewBox. */
+export const DOUBLE_CHECK_PATH =
+  "M4.66683 8L7.96666 11.2998L15.0383 4.22884M1.3667 8.03353L4.66653 11.3334M11.7375 4.26237L8.20199 7.79791";

package/src/icons/DoubleCheck/index.ts

@@ -0,0 +1 @@
+export { DoubleCheckIcon, DOUBLE_CHECK_PATH } from "./DoubleCheckIcon";

package/src/icons/NotificationCancelled/NotificationCancelledIcon.tsx

@@ -0,0 +1,22 @@
+import Svg, { Path, Rect } from "react-native-svg";
+import type { IconProps } from "../types";
+
+export function NotificationCancelledIcon({
+  size = 44,
+  color = "#A63E3E",
+  strokeWidth = 2,
+  fillOpacity = 0.08,
+}: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 44 44" fill="none">
+      <Rect width="44" height="44" rx="22" fill={color} fillOpacity={fillOpacity} />
+      <Path
+        d="M27 17L17 27M17 17L27 27"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}