@ecohouse/ui 0.1.57 → 0.1.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.57",
+  "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/index.ts

@@ -119,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/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>
+  );
+}

package/src/icons/NotificationCancelled/NotificationCancelledIcon.web.tsx

@@ -0,0 +1,21 @@
+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" aria-hidden="true">
+      <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>
+  );
+}

package/src/icons/NotificationCancelled/index.ts

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

package/src/icons/NotificationCheckout/NotificationCheckoutIcon.tsx

@@ -0,0 +1,22 @@
+import Svg, { Path, Rect } from "react-native-svg";
+import type { IconProps } from "../types";
+
+export function NotificationCheckoutIcon({
+  size = 44,
+  color = "#B46436",
+  strokeWidth = 2,
+  fillOpacity = 0.06,
+}: 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="M17 17L27 27M20.3333 27H27V20.3333"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/NotificationCheckout/NotificationCheckoutIcon.web.tsx

@@ -0,0 +1,21 @@
+import type { IconProps } from "../types";
+
+export function NotificationCheckoutIcon({
+  size = 44,
+  color = "#B46436",
+  strokeWidth = 2,
+  fillOpacity = 0.06,
+}: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 44 44" fill="none" aria-hidden="true">
+      <rect width="44" height="44" rx="22" fill={color} fillOpacity={fillOpacity} />
+      <path
+        d="M17 17L27 27M20.3333 27H27V20.3333"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/NotificationCheckout/index.ts

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

package/src/icons/NotificationIcons.stories.tsx

@@ -0,0 +1,99 @@
+import type { ReactNode } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StyleSheet, Text, View } from "react-native";
+import { colors } from "../theme";
+import { NotificationCancelledIcon } from "./NotificationCancelled";
+import { NotificationCheckoutIcon } from "./NotificationCheckout";
+import { NotificationQrCodeIcon } from "./NotificationQrCode";
+import { NotificationSuccessIcon } from "./NotificationSuccess";
+import { NotificationWarningIcon } from "./NotificationWarning";
+
+const meta = {
+  title: "Icons/Notifications",
+  component: NotificationSuccessIcon,
+  args: {
+    size: 44,
+    strokeWidth: 2,
+  },
+  argTypes: {
+    size: { control: { type: "number", min: 24, max: 88, step: 2 } },
+    color: { control: "color" },
+    strokeWidth: { control: { type: "number", min: 1, max: 4, step: 0.5 } },
+    fillOpacity: { control: { type: "number", min: 0, max: 1, step: 0.01 } },
+  },
+  parameters: {
+    backgrounds: { default: "dark" },
+  },
+} satisfies Meta<typeof NotificationSuccessIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Gallery: Story = {
+  render: () => (
+    <View style={styles.gallery}>
+      <IconPreview label="Success">
+        <NotificationSuccessIcon />
+      </IconPreview>
+      <IconPreview label="Cancelled">
+        <NotificationCancelledIcon />
+      </IconPreview>
+      <IconPreview label="Checkout">
+        <NotificationCheckoutIcon />
+      </IconPreview>
+      <IconPreview label="QR code">
+        <NotificationQrCodeIcon />
+      </IconPreview>
+      <IconPreview label="Warning">
+        <NotificationWarningIcon />
+      </IconPreview>
+    </View>
+  ),
+};
+
+export const Success: Story = {};
+
+export const Cancelled: Story = {
+  render: (args) => <NotificationCancelledIcon {...args} />,
+};
+
+export const Checkout: Story = {
+  render: (args) => <NotificationCheckoutIcon {...args} />,
+};
+
+export const QrCode: Story = {
+  name: "QR Code",
+  render: (args) => <NotificationQrCodeIcon {...args} />,
+};
+
+export const Warning: Story = {
+  render: (args) => <NotificationWarningIcon {...args} />,
+};
+
+function IconPreview({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <View style={styles.preview}>
+      {children}
+      <Text style={styles.label}>{label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  gallery: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 24,
+    padding: 16,
+  },
+  preview: {
+    width: 88,
+    alignItems: "center",
+    gap: 8,
+  },
+  label: {
+    color: colors.white,
+    fontFamily: "Noto Sans Armenian",
+    fontSize: 12,
+  },
+});

package/src/icons/NotificationQrCode/NotificationQrCodeIcon.tsx

@@ -0,0 +1,25 @@
+import Svg, { Path, Rect } from "react-native-svg";
+import type { IconProps } from "../types";
+
+const QR_PATH =
+  "M17.4167 17.4167H17.425M26.5833 17.4167H26.5917M17.4167 26.5833H17.425M22.8333 22.8333H22.8417M26.5833 26.5833H26.5917M26.1667 29.5H29.5V26.1667M23.6667 25.75V29.5M29.5 23.6667H25.75M25 20.3333H28.1667C28.6334 20.3333 28.8667 20.3333 29.045 20.2425C29.2018 20.1626 29.3293 20.0351 29.4092 19.8783C29.5 19.7001 29.5 19.4667 29.5 19V15.8333C29.5 15.3666 29.5 15.1333 29.4092 14.955C29.3293 14.7982 29.2018 14.6707 29.045 14.5908C28.8667 14.5 28.6334 14.5 28.1667 14.5H25C24.5333 14.5 24.2999 14.5 24.1217 14.5908C23.9649 14.6707 23.8374 14.7982 23.7575 14.955C23.6667 15.1333 23.6667 15.3666 23.6667 15.8333V19C23.6667 19.4667 23.6667 19.7001 23.7575 19.8783C23.8374 20.0351 23.9649 20.1626 24.1217 20.2425C24.2999 20.3333 24.5333 20.3333 25 20.3333ZM15.8333 20.3333H19C19.4667 20.3333 19.7001 20.3333 19.8783 20.2425C20.0351 20.1626 20.1626 20.0351 20.2425 19.8783C20.3333 19.7001 20.3333 19.4667 20.3333 19V15.8333C20.3333 15.3666 20.3333 15.1333 20.2425 14.955C20.1626 14.7982 20.0351 14.6707 19.8783 14.5908C19.7001 14.5 19.4667 14.5 19 14.5H15.8333C15.3666 14.5 15.1333 14.5 14.955 14.5908C14.7982 14.6707 14.6707 14.7982 14.5908 14.955C14.5 15.1333 14.5 15.3666 14.5 15.8333V19C14.5 19.4667 14.5 19.7001 14.5908 19.8783C14.6707 20.0351 14.7982 20.1626 14.955 20.2425C15.1333 20.3333 15.3666 20.3333 15.8333 20.3333ZM15.8333 29.5H19C19.4667 29.5 19.7001 29.5 19.8783 29.4092C20.0351 29.3293 20.1626 29.2018 20.2425 29.045C20.3333 28.8667 20.3333 28.6334 20.3333 28.1667V25C20.3333 24.5333 20.3333 24.2999 20.2425 24.1217C20.1626 23.9649 20.0351 23.8374 19.8783 23.7575C19.7001 23.6667 19.4667 23.6667 19 23.6667H15.8333C15.3666 23.6667 15.1333 23.6667 14.955 23.7575C14.7982 23.8374 14.6707 23.9649 14.5908 24.1217C14.5 24.2999 14.5 24.5333 14.5 25V28.1667C14.5 28.6334 14.5 28.8667 14.5908 29.045C14.6707 29.2018 14.7982 29.3293 14.955 29.4092C15.1333 29.5 15.3666 29.5 15.8333 29.5Z";
+
+export function NotificationQrCodeIcon({
+  size = 44,
+  color = "#B46436",
+  strokeWidth = 2,
+  fillOpacity = 0.06,
+}: 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={QR_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}