@ecohouse/ui 0.1.35 → 0.1.38

package/src/icons/TableView/TableViewIcon.web.tsx

@@ -0,0 +1,26 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { TABLE_VIEW_PATH } from "./tableViewPath";
+
+export { TABLE_VIEW_PATH } from "./tableViewPath";
+
+export function TableViewIcon({ size = 17, color = colors.grey400, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 17 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={TABLE_VIEW_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/icons/TableView/index.ts

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

package/src/icons/TableView/tableViewPath.ts

@@ -0,0 +1,2 @@
+export const TABLE_VIEW_PATH =
+  "M1 6L16 6M6 1L6 16M5 1H12C13.4001 1 14.1002 1 14.635 1.27248C15.1054 1.51217 15.4878 1.89462 15.7275 2.36502C16 2.8998 16 3.59987 16 5V12C16 13.4001 16 14.1002 15.7275 14.635C15.4878 15.1054 15.1054 15.4878 14.635 15.7275C14.1002 16 13.4001 16 12 16H5C3.59987 16 2.8998 16 2.36502 15.7275C1.89462 15.4878 1.51217 15.1054 1.27248 14.635C1 14.1002 1 13.4001 1 12V5C1 3.59987 1 2.8998 1.27248 2.36502C1.51217 1.89462 1.89462 1.51217 2.36502 1.27248C2.8998 1 3.59987 1 5 1Z";

package/src/icons/index.ts

@@ -9,6 +9,7 @@ export { AmenityIcon } from "./Amenity";
 export type { AmenityIconProps, AmenityName } from "./Amenity";
 export { AlertTriangleIcon } from "./AlertTriangle";
 export { AppleIcon } from "./Store";
+export { ArrowLeftIcon } from "./ArrowLeft";
 export { ArrowRightIcon } from "./ArrowRight";
 export { BagIcon } from "./Bag";
 export { BanIcon } from "./Ban";
@@ -24,6 +25,7 @@ export { ChevronDownIcon } from "./ChevronDown";
 export { ChevronLeftIcon } from "./ChevronLeft";
 export { ClockIcon } from "./Clock";
 export { CloseIcon } from "./Close";
+export { CurrentLocationIcon } from "./CurrentLocation";
 export { EditIcon } from "./Edit";
 export {
   BathroomsIcon,
@@ -70,6 +72,7 @@ export { MapCollapseIcon, MapExpandIcon } from "./MapControls";
 export { MenuIcon } from "./Menu";
 export type { MenuIconProps } from "./Menu";
 export { MenuLinesIcon } from "./MenuLines";
+export { MoreHorizontalIcon } from "./MoreHorizontal";
 export { NavigateIcon } from "./Navigate";
 export { PhoneIcon } from "./Phone";
 export { PlusIcon } from "./Plus";
@@ -83,6 +86,7 @@ export { SidebarIcon } from "./Sidebar";
 export { SortIcon } from "./Sort";
 export { StarIcon } from "./Star";
 export { StarFilledIcon } from "./StarFilled";
+export { TableViewIcon } from "./TableView";
 export { UserIcon } from "./User";
 export { UsersAltIcon } from "./UsersAlt";
 export { VideoIcon } from "./Video";

package/src/icons/registry.ts

@@ -1,4 +1,5 @@
 import { ArrowRightIcon } from "./ArrowRight";
+import { ArrowLeftIcon } from "./ArrowLeft";
 import { AlertTriangleIcon } from "./AlertTriangle";
 import { AppleIcon, GooglePlayIcon } from "./Store";
 import { BagIcon } from "./Bag";
@@ -15,6 +16,7 @@ import { ChevronDownIcon } from "./ChevronDown";
 import { ChevronLeftIcon } from "./ChevronLeft";
 import { ClockIcon } from "./Clock";
 import { CloseIcon } from "./Close";
+import { CurrentLocationIcon } from "./CurrentLocation";
 import { EditIcon } from "./Edit";
 import {
   BathroomsIcon,
@@ -60,6 +62,7 @@ import { MapCollapseIcon, MapExpandIcon } from "./MapControls";
 import { MenuIcon } from "./Menu";
 import { MenuLinesIcon } from "./MenuLines";
 import { MinusIcon } from "./Minus";
+import { MoreHorizontalIcon } from "./MoreHorizontal";
 import { NavigateIcon } from "./Navigate";
 import { PhoneIcon } from "./Phone";
 import { PlusIcon } from "./Plus";
@@ -72,6 +75,7 @@ import { SidebarIcon } from "./Sidebar";
 import { SortIcon } from "./Sort";
 import { StarIcon } from "./Star";
 import { StarFilledIcon } from "./StarFilled";
+import { TableViewIcon } from "./TableView";
 import { UserIcon } from "./User";
 import { UsersAltIcon } from "./UsersAlt";
 import { VideoIcon } from "./Video";
@@ -83,6 +87,7 @@ export const icons = {
   alertTriangle: AlertTriangleIcon,
   areaExpand: AreaExpandIcon,
   apple: AppleIcon,
+  arrowLeft: ArrowLeftIcon,
   arrowRight: ArrowRightIcon,
   bag: BagIcon,
   ban: BanIcon,
@@ -99,6 +104,7 @@ export const icons = {
   chevronLeft: ChevronLeftIcon,
   clock: ClockIcon,
   close: CloseIcon,
+  currentLocation: CurrentLocationIcon,
   edit: EditIcon,
   clockFilled: ClockFilledIcon,
   copy: CopyIcon,
@@ -133,6 +139,7 @@ export const icons = {
   menu: MenuIcon,
   menuLines: MenuLinesIcon,
   minus: MinusIcon,
+  moreHorizontal: MoreHorizontalIcon,
   navigate: NavigateIcon,
   noSmoking: NoSmokingIcon,
   paw: PawIcon,
@@ -152,6 +159,7 @@ export const icons = {
   sort: SortIcon,
   star: StarIcon,
   starFilled: StarFilledIcon,
+  tableView: TableViewIcon,
   tooltipArrow: TooltipArrowIcon,
   trash: TrashIcon,
   user: UserIcon,
@@ -168,9 +176,11 @@ export const iconNames = Object.keys(icons) as IconName[];
 
 export const iconGroups = {
   navigation: [
+    "arrowLeft",
     "arrowRight",
     "chevronDown",
     "chevronLeft",
+    "currentLocation",
     "home",
     "listView",
     "locationPin",
@@ -181,6 +191,7 @@ export const iconGroups = {
     "menu",
     "menuLines",
     "navigate",
+    "tableView",
   ],
   actions: [
     "show",
@@ -211,6 +222,7 @@ export const iconGroups = {
     "star",
     "starFilled",
     "minus",
+    "moreHorizontal",
     "plus",
     "refresh",
     "refundStatus",

package/src/index.ts

@@ -9,8 +9,10 @@ export {
   InfoTile,
   ContactInfoCard,
   AccordionItem,
+  Accordion,
   StepList,
   Counter,
+  QuantityInput,
   SegmentedToggle,
   Sidebar,
   LanguageSwitcher,
@@ -22,6 +24,7 @@ export {
   FloatingActionButton,
   Modal,
   Input,
+  AutocompleteInput,
   VerificationCodeInput,
   Select,
   Textarea,
@@ -45,8 +48,10 @@ export type {
   InfoTileProps,
   ContactInfoCardProps,
   AccordionItemProps,
+  AccordionProps,
   StepListProps,
   CounterProps,
+  QuantityInputProps,
   SegmentedToggleOption,
   SegmentedToggleProps,
   SidebarProps,
@@ -71,6 +76,8 @@ export type {
   InputIcon,
   InputProps,
   InputSize,
+  AutocompleteInputProps,
+  AutocompleteOption,
   VerificationCodeInputHandle,
   VerificationCodeInputProps,
   SelectIcon,
@@ -94,6 +101,8 @@ export {
   BRAND_LOGO_DEFAULT_HEIGHT,
   BRAND_LOGO_DEFAULT_WIDTH,
   FavoritesButton,
+  IconStatusBadge,
+  InfoCardV2,
   MenuItem,
 } from "./primitives";
 export type {
@@ -102,6 +111,8 @@ export type {
   BrandLogoProps,
   BrandLogoVariant,
   FavoritesButtonProps,
+  IconStatusBadgeProps,
+  InfoCardV2Props,
   MenuItemProps,
 } from "./primitives";
 
@@ -115,6 +126,7 @@ export {
   iconGroups,
   iconGroupNames,
   getIconsByGroup,
+  ArrowLeftIcon,
   ArrowRightIcon,
   BagIcon,
   BanIcon,
@@ -130,6 +142,7 @@ export {
   ChevronLeftIcon,
   ClockIcon,
   CloseIcon,
+  CurrentLocationIcon,
   EditIcon,
   BathroomsIcon,
   BedroomsIcon,
@@ -137,6 +150,7 @@ export {
   GuestsIcon,
   RatingStarIcon,
   SaveHeartIcon,
+  MoreHorizontalIcon,
   AreaExpandIcon,
   CheckSuccessIcon,
   ClockFilledIcon,
@@ -188,6 +202,7 @@ export {
   SortIcon,
   StarIcon,
   StarFilledIcon,
+  TableViewIcon,
   UserIcon,
   UsersAltIcon,
   VideoIcon,

package/src/primitives/IconStatusBadge/IconStatusBadge.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LockIcon } from "../../icons";
+import { IconStatusBadge } from "./IconStatusBadge";
+
+const meta = {
+  title: "Primitives/Icon Status Badge",
+  component: IconStatusBadge,
+  args: {
+    icon: LockIcon,
+    iconProps: { color: "#60C27A" },
+    label: "Available",
+  },
+  parameters: { backgrounds: { default: "black" } },
+} satisfies Meta<typeof IconStatusBadge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Armenian: Story = { args: { label: "Ազատ" } };
+export const English: Story = {};
+export const Russian: Story = { args: { label: "Свободен" } };

package/src/primitives/IconStatusBadge/IconStatusBadge.tsx

@@ -0,0 +1,76 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import type { IconComponent, IconProps } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface IconStatusBadgeProps extends Omit<ViewProps, "style" | "children"> {
+  label: string;
+  icon: IconComponent;
+  iconProps?: Omit<IconProps, "size">;
+  iconSize?: number;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const webBlurStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        backdropFilter: "blur(10px)",
+        WebkitBackdropFilter: "blur(10px)",
+      } as ViewStyle)
+    : {};
+
+export const IconStatusBadge = forwardRef<ComponentRef<typeof View>, IconStatusBadgeProps>(
+  function IconStatusBadge(
+    { label, icon: Icon, iconProps, iconSize = 16, style, className, ...rest },
+    forwardedRef,
+  ) {
+    const badgeRef = useRef<ComponentRef<typeof View>>(null);
+    const setBadgeRef = useMemo(() => mergeRefs(badgeRef, forwardedRef), [forwardedRef]);
+
+    useApplyWebClassName(badgeRef, className);
+
+    return (
+      <View {...rest} ref={setBadgeRef} style={[styles.root, webBlurStyle, style]}>
+        <Icon {...iconProps} size={iconSize} />
+        <Text numberOfLines={1} style={styles.label}>
+          {label}
+        </Text>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    minHeight: 34,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    alignSelf: "flex-start",
+    borderRadius: 39,
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10,
+    backgroundColor: "#09090966",
+  },
+  label: {
+    color: colors.white,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "700",
+    lineHeight: 15,
+  },
+});

package/src/primitives/IconStatusBadge/index.ts

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

package/src/primitives/InfoCardV2/InfoCardV2.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StyleSheet, View } from "react-native";
+import { BagIcon, HomeIcon, LockIcon } from "../../icons";
+import { colors } from "../../theme";
+import { InfoCardV2 } from "./InfoCardV2";
+
+const meta = {
+  title: "Primitives/InfoCardV2",
+  component: InfoCardV2,
+  args: {
+    label: "Ընդհանուր քոթեջներ",
+    value: "12",
+    icon: HomeIcon,
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof InfoCardV2>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <View style={styles.frame}>
+      <InfoCardV2 {...args} />
+    </View>
+  ),
+};
+
+export const OverviewRow: Story = {
+  render: () => (
+    <View style={styles.row}>
+      <InfoCardV2 label="Ընդհանուր քոթեջներ" value="12" icon={HomeIcon} />
+      <InfoCardV2 label="Զբաղված" value="8" icon={LockIcon} />
+      <InfoCardV2 label="Ազատ" value="4" icon={BagIcon} />
+    </View>
+  ),
+};
+
+export const WhiteIcon: Story = {
+  args: {
+    label: "Label",
+    value: "description",
+    icon: LockIcon,
+    iconProps: { color: colors.white },
+  },
+  render: (args) => (
+    <View style={styles.frame}>
+      <InfoCardV2 {...args} />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  frame: {
+    width: 411,
+  },
+  row: {
+    width: 1280,
+    flexDirection: "row",
+    gap: 24,
+  },
+});

package/src/primitives/InfoCardV2/InfoCardV2.tsx

@@ -0,0 +1,116 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import type { IconComponent, IconProps } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface InfoCardV2Props extends Omit<ViewProps, "style" | "children"> {
+  label: string;
+  value: string;
+  icon: IconComponent;
+  iconProps?: Omit<IconProps, "size">;
+  iconSize?: number;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const ICON_SLOT_SIZE = 41;
+const ICON_SIZE = 20;
+
+/** Dashboard metric card with a leading icon, muted label, and emphasized value. */
+export const InfoCardV2 = forwardRef<ComponentRef<typeof View>, InfoCardV2Props>(
+  function InfoCardV2(
+    {
+      label,
+      value,
+      icon: Icon,
+      iconProps,
+      iconSize = ICON_SIZE,
+      style,
+      className,
+      accessibilityLabel,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+
+    useApplyWebClassName(containerRef, className?.trim() || undefined);
+
+    return (
+      <View
+        {...rest}
+        ref={setContainerRef}
+        accessibilityRole="text"
+        accessibilityLabel={accessibilityLabel ?? `${label}. ${value}`}
+        style={[styles.root, style]}
+      >
+        <View style={styles.iconSlot}>
+          <Icon {...iconProps} size={iconSize} color={iconProps?.color ?? colors.primary} />
+        </View>
+        <View style={styles.content}>
+          <Text numberOfLines={1} style={styles.label}>
+            {label}
+          </Text>
+          <Text numberOfLines={1} style={styles.value}>
+            {value}
+          </Text>
+        </View>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    minHeight: 65,
+    padding: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 0,
+    gap: 16,
+    borderRadius: 16,
+    backgroundColor: colors.grey700,
+  },
+  iconSlot: {
+    width: ICON_SLOT_SIZE,
+    height: ICON_SLOT_SIZE,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    backgroundColor: colors.grey600,
+  },
+  content: {
+    minWidth: 0,
+    flexShrink: 1,
+    gap: 6,
+  },
+  label: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 16,
+    letterSpacing: 0,
+    color: colors.lightGrey,
+  },
+  value: {
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "700",
+    lineHeight: 19,
+    letterSpacing: 0,
+    color: colors.white,
+  },
+});

package/src/primitives/InfoCardV2/index.ts

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

package/src/primitives/index.ts

@@ -3,9 +3,16 @@ export type { AmenityProps, AmenityVariant } from "./Amenity";
 
 export { MenuItem } from "./MenuItem";
 export type { MenuItemProps } from "./MenuItem";
+
+export { InfoCardV2 } from "./InfoCardV2";
+export type { InfoCardV2Props } from "./InfoCardV2";
+
 export { FavoritesButton } from "./FavoritesButton";
 export type { FavoritesButtonProps } from "./FavoritesButton";
 
+export { IconStatusBadge } from "./IconStatusBadge";
+export type { IconStatusBadgeProps } from "./IconStatusBadge";
+
 export {
   BrandLogo,
   BRAND_LOGO_COLORS,

package/src/theme/colors.test.ts

@@ -16,6 +16,7 @@ describe("design tokens", () => {
     expect(colors.whiteAlpha86).toBe("#FFFFFFDB");
     expect(colors.whiteAlpha40).toBe("#FFFFFF66");
     expect(colors.whiteAlpha20).toBe("#FFFFFF33");
+    expect(colors.whiteAlpha1).toBe("#FFFFFF03");
     expect(colors.whiteAlpha6).toBe("#FFFFFF0F");
     expect(colors.whiteAlpha10).toBe("#FFFFFF1A");
     expect(colors.whiteAlpha5).toBe("#FFFFFF0D");

package/src/theme/colors.ts

@@ -26,6 +26,7 @@ export const colors = {
   whiteAlpha60: "#FFFFFF99",
   whiteAlpha40: "#FFFFFF66",
   whiteAlpha20: "#FFFFFF33",
+  whiteAlpha1: "#FFFFFF03",
   whiteAlpha6: "#FFFFFF0F",
   whiteAlpha10: "#FFFFFF1A",
   whiteAlpha5: "#FFFFFF0D",