@ecohouse/ui 0.1.30 → 0.1.32

package/src/components/InfoTile/InfoTile.tsx

@@ -0,0 +1,118 @@
+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 InfoTileProps extends Omit<ViewProps, "style" | "children"> {
+  title: string;
+  /** Optional supporting line under the title. */
+  description?: string;
+  icon: IconComponent;
+  iconProps?: Omit<IconProps, "size">;
+  iconSize?: number;
+  /** Icon slot fill. Defaults to `grey600`. */
+  iconSlotBackgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const ICON_SLOT = 36;
+const ICON_SIZE = 20;
+
+/**
+ * Compact info tile — icon slot + title (+ optional description).
+ * Padding 12, radius 16, icon container 36×36.
+ */
+export const InfoTile = forwardRef<ComponentRef<typeof View>, InfoTileProps>(function InfoTile(
+  {
+    title,
+    description,
+    icon: Icon,
+    iconProps,
+    iconSize = ICON_SIZE,
+    iconSlotBackgroundColor = colors.grey600,
+    style,
+    className,
+    accessibilityLabel,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof View>>(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const hasDescription = Boolean(description?.trim());
+
+  useApplyWebClassName(containerRef, className);
+
+  return (
+    <View
+      {...rest}
+      ref={setContainerRef}
+      accessibilityRole="text"
+      accessibilityLabel={
+        accessibilityLabel ?? (hasDescription ? `${title}. ${description}` : title)
+      }
+      style={[styles.root, style]}
+    >
+      <View style={[styles.iconSlot, { backgroundColor: iconSlotBackgroundColor }]}>
+        <Icon {...iconProps} size={iconSize} color={iconProps?.color ?? colors.white} />
+      </View>
+      <View style={styles.textBlock}>
+        <Text style={styles.title}>{title}</Text>
+        {hasDescription ? <Text style={styles.description}>{description}</Text> : null}
+      </View>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 16,
+    padding: 12,
+    borderRadius: 16,
+    backgroundColor: colors.grey700,
+  },
+  iconSlot: {
+    width: ICON_SLOT,
+    height: ICON_SLOT,
+    padding: 8,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  textBlock: {
+    flexShrink: 1,
+    minWidth: 0,
+    flexDirection: "column",
+    gap: 6,
+  },
+  title: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 14,
+    letterSpacing: 0,
+    color: colors.white,
+  },
+  description: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 12,
+    letterSpacing: 0,
+    color: colors.lightGrey,
+  },
+});

package/src/components/InfoTile/index.ts

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

package/src/components/PaginationDots/PaginationDots.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { PaginationDots } from "./PaginationDots";
+
+const meta = {
+  title: "Components/PaginationDots",
+  component: PaginationDots,
+  args: {
+    count: 4,
+    activeIndex: 0,
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof PaginationDots>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <View style={styles.frame}>
+      <PaginationDots {...args} />
+    </View>
+  ),
+};
+
+function InteractivePaginationDots() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <View style={styles.frame}>
+      <PaginationDots count={4} activeIndex={activeIndex} onDotPress={setActiveIndex} />
+    </View>
+  );
+}
+
+export const Interactive: Story = {
+  render: () => <InteractivePaginationDots />,
+};
+
+const styles = StyleSheet.create({
+  frame: {
+    padding: 24,
+    backgroundColor: "#090909",
+    alignItems: "center",
+  },
+});

package/src/components/PaginationDots/PaginationDots.tsx

@@ -0,0 +1,111 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  Pressable,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { colors } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface PaginationDotsProps extends Omit<ViewProps, "style" | "children"> {
+  /** Total number of steps / slides. */
+  count: number;
+  /** Zero-based active index. */
+  activeIndex: number;
+  /** Called when a dot is pressed. */
+  onDotPress?: (index: number) => void;
+  /** Accessible name for the control group. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+/** Total width of the active pill + inactive dots + gaps. */
+const TRACK_WIDTH = 48;
+const DOT_HEIGHT = 6;
+const INACTIVE_SIZE = 6;
+const GAP = 4;
+
+function activePillWidth(count: number) {
+  if (count <= 1) return TRACK_WIDTH;
+  const inactiveCount = count - 1;
+  return TRACK_WIDTH - inactiveCount * INACTIVE_SIZE - inactiveCount * GAP;
+}
+
+/**
+ * Carousel / stepper pagination.
+ * Whole track is `48` wide; height `6`; gap `4`; inactive dots `6×6`;
+ * active pill takes the remaining width.
+ */
+export const PaginationDots = forwardRef<ComponentRef<typeof View>, PaginationDotsProps>(
+  function PaginationDots(
+    { count, activeIndex, onDotPress, accessibilityLabel, style, className, ...rest },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const safeCount = Math.max(0, count);
+    const safeActive = safeCount === 0 ? 0 : Math.min(Math.max(activeIndex, 0), safeCount - 1);
+    const pillWidth = Math.max(INACTIVE_SIZE, activePillWidth(safeCount));
+
+    useApplyWebClassName(containerRef, className);
+
+    if (safeCount <= 0) {
+      return null;
+    }
+
+    return (
+      <View
+        {...rest}
+        ref={setContainerRef}
+        accessibilityRole="adjustable"
+        accessibilityLabel={accessibilityLabel ?? `Slide ${safeActive + 1} of ${safeCount}`}
+        style={[styles.root, style]}
+      >
+        {Array.from({ length: safeCount }, (_, index) => {
+          const active = index === safeActive;
+          return (
+            <Pressable
+              key={index}
+              accessibilityRole="button"
+              accessibilityLabel={`Go to slide ${index + 1}`}
+              accessibilityState={{ selected: active }}
+              disabled={onDotPress == null}
+              hitSlop={8}
+              onPress={() => onDotPress?.(index)}
+              style={[
+                styles.dot,
+                active ? [styles.dotActive, { width: pillWidth }] : styles.dotInactive,
+              ]}
+            />
+          );
+        })}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    width: TRACK_WIDTH,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: GAP,
+  },
+  dot: {
+    height: DOT_HEIGHT,
+    borderRadius: DOT_HEIGHT,
+  },
+  dotActive: {
+    backgroundColor: colors.white,
+  },
+  dotInactive: {
+    width: INACTIVE_SIZE,
+    backgroundColor: colors.whiteAlpha40,
+  },
+});

package/src/components/PaginationDots/index.ts

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

package/src/components/Sidebar/Sidebar.tsx

@@ -218,7 +218,10 @@ export const Sidebar = forwardRef<ComponentRef<typeof View>, SidebarProps>(funct
 
 const styles = StyleSheet.create({
   root: {
+    flexDirection: "column",
+    alignSelf: "stretch",
     height: "100%",
+    minHeight: "100%",
     flexShrink: 0,
     backgroundColor: colors.dark,
     borderRightWidth: 1,
@@ -257,8 +260,11 @@ const styles = StyleSheet.create({
     flexShrink: 0,
   },
   nav: {
-    flex: 1,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
     width: "100%",
+    minHeight: 0,
     padding: 16,
     gap: 10,
   },
@@ -291,7 +297,9 @@ const styles = StyleSheet.create({
   footer: {
     height: PROFILE_SECTION_HEIGHT,
     width: "100%",
+    flexGrow: 0,
     flexShrink: 0,
+    marginTop: "auto",
     alignItems: "center",
     justifyContent: "center",
     paddingVertical: 12,

package/src/components/StatusBadge/StatusBadge.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StyleSheet, View } from "react-native";
+import { StatusBadge } from "./StatusBadge";
+
+const meta = {
+  title: "Components/StatusBadge",
+  component: StatusBadge,
+  args: {
+    label: "Ակտիվ",
+    tone: "active",
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof StatusBadge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Active: Story = {};
+
+export const Completed: Story = {
+  args: {
+    label: "Ավարտված",
+    tone: "completed",
+  },
+};
+
+export const Cancelled: Story = {
+  args: {
+    label: "Չեղարկված",
+    tone: "cancelled",
+  },
+};
+
+export const AllTones: Story = {
+  render: () => (
+    <View style={styles.row}>
+      <StatusBadge label="Ակտիվ" tone="active" />
+      <StatusBadge label="Ավարտված" tone="completed" />
+      <StatusBadge label="Չեղարկված" tone="cancelled" />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+    padding: 24,
+    backgroundColor: "#090909",
+  },
+});

package/src/components/StatusBadge/StatusBadge.tsx

@@ -0,0 +1,108 @@
+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 StatusBadgeTone = "active" | "completed" | "cancelled";
+
+export interface StatusBadgeProps extends Omit<ViewProps, "style" | "children"> {
+  label: string;
+  tone?: StatusBadgeTone;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const toneConfig = {
+  active: {
+    backgroundColor: colors.greenMuted,
+    color: colors.green,
+  },
+  completed: {
+    backgroundColor: colors.greyMuted,
+    color: colors.grey0,
+  },
+  cancelled: {
+    backgroundColor: colors.cancelledMuted,
+    color: colors.red,
+  },
+} as const satisfies Record<StatusBadgeTone, { backgroundColor: string; color: string }>;
+
+const webBlurStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        backdropFilter: "blur(39.5px)",
+        WebkitBackdropFilter: "blur(39.5px)",
+      } as ViewStyle)
+    : {};
+
+/**
+ * Compact status chip (e.g. booking active / completed / cancelled).
+ * Height 28, pill radius, Semibold 12 — distinct from amenity `Badge`.
+ */
+export const StatusBadge = forwardRef<ComponentRef<typeof View>, StatusBadgeProps>(
+  function StatusBadge(
+    { label, tone = "active", style, className, accessibilityLabel, ...rest },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof View>>(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const preset = toneConfig[tone];
+
+    useApplyWebClassName(containerRef, className);
+
+    return (
+      <View
+        {...rest}
+        ref={setContainerRef}
+        accessibilityRole="text"
+        accessibilityLabel={accessibilityLabel ?? label}
+        style={[styles.base, { backgroundColor: preset.backgroundColor }, webBlurStyle, style]}
+      >
+        <Text
+          style={[
+            styles.label,
+            { color: preset.color },
+            Platform.OS === "android" ? styles.labelAndroid : null,
+          ]}
+        >
+          {label}
+        </Text>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  base: {
+    height: 28,
+    minHeight: 28,
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 50,
+    overflow: "hidden",
+  },
+  label: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "600",
+    lineHeight: 12,
+    letterSpacing: 0,
+  },
+  labelAndroid: {
+    includeFontPadding: false,
+  },
+});

package/src/components/StatusBadge/index.ts

@@ -0,0 +1,2 @@
+export { StatusBadge } from "./StatusBadge";
+export type { StatusBadgeProps, StatusBadgeTone } from "./StatusBadge";

package/src/components/StepList/StepList.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StyleSheet, View } from "react-native";
+import { StepList } from "./StepList";
+
+const meta = {
+  title: "Components/StepList",
+  component: StepList,
+  args: {
+    steps: [
+      "Ստացեք ակտիվ QR կոդը մուտքի օրը՝ ժամը 10:00-ին, այս էջի «Թվային բանալի» բաժնում։",
+      "Մոտեցեք քոթեջի մուտքի դռան սարքին (սկաներին) և պահեք հեռախոսի էկրանը։",
+      "Հաջող սկանավորումից հետո դուռը ավտոմատ կապակողպվի։",
+    ],
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof StepList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <View style={styles.frame}>
+      <StepList {...args} />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  frame: {
+    padding: 24,
+    maxWidth: 560,
+    backgroundColor: "#090909",
+  },
+});

package/src/components/StepList/StepList.tsx

@@ -0,0 +1,152 @@
+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 interface StepListProps extends Omit<ViewProps, "style" | "children"> {
+  /** Step descriptions, numbered automatically from 1. */
+  steps: string[];
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const BADGE_SIZE = 42;
+const ROW_GAP = 12;
+const CONNECTOR_WIDTH = 2;
+const CONNECTOR_HEIGHT = 19;
+const CONNECTOR_GAP = 8;
+
+const webBlurStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        backdropFilter: "blur(20px)",
+        WebkitBackdropFilter: "blur(20px)",
+      } as ViewStyle)
+    : {};
+
+/**
+ * Vertical numbered process list — 42px badges, 2×19 connectors with 8px gaps.
+ */
+export const StepList = forwardRef<ComponentRef<typeof View>, StepListProps>(function StepList(
+  { steps, style, className, accessibilityLabel, ...rest },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof View>>(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+
+  useApplyWebClassName(containerRef, className);
+
+  if (steps.length === 0) {
+    return null;
+  }
+
+  return (
+    <View
+      {...rest}
+      ref={setContainerRef}
+      accessibilityRole="summary"
+      accessibilityLabel={accessibilityLabel}
+      style={[styles.root, style]}
+    >
+      {steps.map((description, index) => {
+        const isLast = index === steps.length - 1;
+        const number = index + 1;
+
+        return (
+          <View key={`${number}-${description}`} style={styles.stepBlock}>
+            <View style={styles.row}>
+              <View style={[styles.badge, webBlurStyle]}>
+                <Text
+                  style={[
+                    styles.badgeLabel,
+                    Platform.OS === "android" ? styles.labelAndroid : null,
+                  ]}
+                >
+                  {String(number)}
+                </Text>
+              </View>
+              <Text
+                style={[styles.description, Platform.OS === "android" ? styles.labelAndroid : null]}
+              >
+                {description}
+              </Text>
+            </View>
+
+            {!isLast ? (
+              <View style={styles.connectorSlot}>
+                <View style={styles.connector} />
+              </View>
+            ) : null}
+          </View>
+        );
+      })}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    width: "100%",
+  },
+  stepBlock: {
+    width: "100%",
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: ROW_GAP,
+    width: "100%",
+  },
+  badge: {
+    width: BADGE_SIZE,
+    height: BADGE_SIZE,
+    borderRadius: 79,
+    backgroundColor: colors.grey600,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    overflow: "hidden",
+  },
+  badgeLabel: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 14,
+    letterSpacing: 0,
+    color: colors.white,
+    textAlign: "center",
+  },
+  description: {
+    flex: 1,
+    minWidth: 0,
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 14,
+    letterSpacing: 0,
+    color: colors.white,
+  },
+  connectorSlot: {
+    width: BADGE_SIZE,
+    alignItems: "center",
+    paddingVertical: CONNECTOR_GAP,
+  },
+  connector: {
+    width: CONNECTOR_WIDTH,
+    height: CONNECTOR_HEIGHT,
+    borderRadius: 98,
+    backgroundColor: colors.grey600,
+  },
+  labelAndroid: {
+    includeFontPadding: false,
+  },
+});

package/src/components/StepList/index.ts

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