@ecohouse/ui 0.1.56 → 0.1.57

package/package.json

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

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";
 

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/index.ts

@@ -27,6 +27,7 @@ export { CheckIcon } from "./Check";
 export { CheckBadgeIcon } from "./CheckBadge";
 export { ChevronDownIcon } from "./ChevronDown";
 export { ChevronLeftIcon } from "./ChevronLeft";
+export { ChevronRightIcon } from "./ChevronRight";
 export { ClockIcon } from "./Clock";
 export { CloseIcon } from "./Close";
 export { CloudUploadIcon } from "./CloudUpload";

package/src/icons/registry.ts

@@ -17,6 +17,7 @@ import { CheckIcon } from "./Check";
 import { CheckBadgeIcon } from "./CheckBadge";
 import { ChevronDownIcon } from "./ChevronDown";
 import { ChevronLeftIcon } from "./ChevronLeft";
+import { ChevronRightIcon } from "./ChevronRight";
 import { ClockIcon } from "./Clock";
 import { CloseIcon } from "./Close";
 import { DeactivateIcon } from "./Deactivate";
@@ -127,6 +128,7 @@ export const icons = {
   checkSuccess: CheckSuccessIcon,
   chevronDown: ChevronDownIcon,
   chevronLeft: ChevronLeftIcon,
+  chevronRight: ChevronRightIcon,
   clock: ClockIcon,
   close: CloseIcon,
   deactivate: DeactivateIcon,
@@ -223,6 +225,7 @@ export const iconGroups = {
     "arrowRight",
     "chevronDown",
     "chevronLeft",
+    "chevronRight",
     "home",
     "listView",
     "locationPin",

package/src/index.ts

@@ -4,6 +4,7 @@ export {
   AccountHeader,
   Badge,
   StatusBadge,
+  StatusIndicator,
   PaginationDots,
   StepPager,
   InfoTile,
@@ -46,6 +47,8 @@ export type {
   BadgeVariant,
   StatusBadgeProps,
   StatusBadgeTone,
+  StatusIndicatorProps,
+  StatusIndicatorStatus,
   PaginationDotsProps,
   StepPagerProps,
   InfoTileProps,
@@ -148,6 +151,7 @@ export {
   CheckBadgeIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
+  ChevronRightIcon,
   ClockIcon,
   CloseIcon,
   CloudUploadIcon,