@ecohouse/ui 0.1.31 → 0.1.33

package/src/components/FloatingActionButton/FloatingActionButton.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { StyleSheet, View } from "react-native";
+import { FloatingActionButton } from "./FloatingActionButton";
+
+const meta = {
+  title: "Components/FloatingActionButton",
+  component: FloatingActionButton,
+  args: {
+    onPress: fn(),
+    accessibilityLabel: "Նոր ամրագրում",
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof FloatingActionButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <View style={styles.frame}>
+      <FloatingActionButton {...args} style={styles.fab} />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  frame: {
+    position: "relative",
+    width: 390,
+    height: 640,
+    backgroundColor: "#090909",
+  },
+  fab: {
+    position: "absolute",
+    right: 12,
+    bottom: 20,
+  },
+});

package/src/components/FloatingActionButton/FloatingActionButton.tsx

@@ -0,0 +1,77 @@
+import { forwardRef, useMemo, useRef, type ComponentRef, type ReactNode } from "react";
+import {
+  StyleSheet,
+  TouchableOpacity,
+  type GestureResponderEvent,
+  type StyleProp,
+  type TouchableOpacityProps,
+  type ViewStyle,
+} from "react-native";
+import { PlusIcon } from "../../icons";
+import { colors } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface FloatingActionButtonProps extends Omit<
+  TouchableOpacityProps,
+  "onPress" | "disabled" | "style" | "children"
+> {
+  onPress: (event: GestureResponderEvent) => void;
+  disabled?: boolean;
+  /** Defaults to a 24×24 white plus icon. */
+  icon?: ReactNode;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const SIZE = 48;
+const PADDING = 12;
+const ICON_SIZE = 24;
+const RADIUS = 64;
+
+export const FloatingActionButton = forwardRef<
+  ComponentRef<typeof TouchableOpacity>,
+  FloatingActionButtonProps
+>(function FloatingActionButton(
+  { onPress, disabled = false, icon, accessibilityLabel = "Add", style, className, ...rest },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof TouchableOpacity>>(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const resolvedClassName = className?.trim() || undefined;
+
+  useApplyWebClassName(containerRef, resolvedClassName);
+
+  return (
+    <TouchableOpacity
+      {...rest}
+      ref={setContainerRef}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.7}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ disabled }}
+      style={[styles.base, disabled && styles.disabled, style]}
+    >
+      {icon ?? <PlusIcon color={colors.white} size={ICON_SIZE} strokeWidth={2} />}
+    </TouchableOpacity>
+  );
+});
+
+const styles = StyleSheet.create({
+  base: {
+    width: SIZE,
+    height: SIZE,
+    padding: PADDING,
+    borderRadius: RADIUS,
+    backgroundColor: colors.primary,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+});

package/src/components/FloatingActionButton/index.ts

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

package/src/components/InfoTile/InfoTile.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StyleSheet, View } from "react-native";
+import { NoSmokingIcon, PawIcon, QuietHoursIcon, TrashIcon } from "../../icons";
+import { InfoTile } from "./InfoTile";
+
+const meta = {
+  title: "Components/InfoTile",
+  component: InfoTile,
+  args: {
+    title: "Լռության ժամեր",
+    description: "23:00 - 08:00",
+    icon: QuietHoursIcon,
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof InfoTile>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <View style={styles.frame}>
+      <InfoTile {...args} />
+    </View>
+  ),
+};
+
+export const HouseRulesGrid: Story = {
+  render: () => (
+    <View style={styles.grid}>
+      <InfoTile
+        title="Լռության ժամեր"
+        description="23:00 - 08:00"
+        icon={QuietHoursIcon}
+        style={styles.tile}
+      />
+      <InfoTile
+        title="Ծխելը արգելված է"
+        description="Տան ներսում խստիվ արգելվում է"
+        icon={NoSmokingIcon}
+        style={styles.tile}
+      />
+      <InfoTile
+        title="Ընտանի կենդանիներ"
+        description="Թույլատրված չեն"
+        icon={PawIcon}
+        style={styles.tile}
+      />
+      <InfoTile
+        title="Աղբի հեռացում"
+        description="Խնդրում ենք աղբը թողնել դրսի աղբամանում"
+        icon={TrashIcon}
+        style={styles.tile}
+      />
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  frame: {
+    padding: 24,
+    backgroundColor: "#090909",
+    maxWidth: 420,
+  },
+  grid: {
+    padding: 24,
+    backgroundColor: "#090909",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+    maxWidth: 720,
+  },
+  tile: {
+    flexGrow: 1,
+    flexBasis: "45%",
+    minWidth: 280,
+  },
+});

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/Select/Select.tsx

@@ -61,6 +61,8 @@ type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
   loading?: boolean;
   /** Text shown when no options match. */
   emptyText?: string;
+  /** Override color for the selected value text in the trigger. */
+  valueColor?: string;
   style?: StyleProp<ViewStyle>;
   className?: string;
 };
@@ -264,6 +266,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
       onSearchChange,
       loading = false,
       emptyText = "No results",
+      valueColor,
       style,
       className,
       accessibilityLabel,
@@ -508,7 +511,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
 
     const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
       size: ICON_SIZE,
-      color: error ? colors.red : isOpen ? colors.primary : colors.grey100,
+      color: error ? colors.red : colors.primary,
     });
     const hasLeftIcon = showLeftIcon || leftIcon != null;
 
@@ -520,7 +523,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
     const triggerTextColor = hasValue
       ? error
         ? colors.red
-        : colors.white
+        : (valueColor ?? colors.white)
       : error
         ? colors.red
         : colors.grey100;

package/src/components/Sidebar/Sidebar.tsx

@@ -59,6 +59,8 @@ export interface SidebarProps extends Omit<ViewProps, "style" | "children"> {
   collapsed?: boolean;
   defaultCollapsed?: boolean;
   onCollapsedChange?: (collapsed: boolean) => void;
+  /** When false, hides the expand/collapse control. Defaults to `true`. */
+  showCollapseToggle?: boolean;
   style?: StyleProp<ViewStyle>;
   className?: string;
 }
@@ -86,6 +88,7 @@ export const Sidebar = forwardRef<ComponentRef<typeof View>, SidebarProps>(funct
     collapsed: collapsedProp,
     defaultCollapsed = false,
     onCollapsedChange,
+    showCollapseToggle = true,
     style,
     className,
     ...rest
@@ -136,7 +139,13 @@ export const Sidebar = forwardRef<ComponentRef<typeof View>, SidebarProps>(funct
       style={[styles.root, { width: widthAnim }, style]}
       accessibilityRole="menu"
     >
-      <View style={[styles.header, collapsed ? styles.headerCollapsed : styles.headerExpanded]}>
+      <View
+        style={[
+          styles.header,
+          collapsed ? styles.headerCollapsed : styles.headerExpanded,
+          !showCollapseToggle ? styles.headerNoToggle : null,
+        ]}
+      >
         <Animated.View
           pointerEvents={collapsed ? "none" : "auto"}
           style={[
@@ -157,16 +166,18 @@ export const Sidebar = forwardRef<ComponentRef<typeof View>, SidebarProps>(funct
           />
         </Animated.View>
 
-        <Pressable
-          accessibilityRole="button"
-          accessibilityLabel={collapsed ? expandAccessibilityLabel : collapseAccessibilityLabel}
-          accessibilityState={{ expanded: !collapsed }}
-          hitSlop={8}
-          onPress={() => setCollapsed(!collapsed)}
-          style={styles.toggleButton}
-        >
-          <SidebarIcon color={colors.grey100} size={TOGGLE_SIZE} strokeWidth={2} />
-        </Pressable>
+        {showCollapseToggle ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={collapsed ? expandAccessibilityLabel : collapseAccessibilityLabel}
+            accessibilityState={{ expanded: !collapsed }}
+            hitSlop={8}
+            onPress={() => setCollapsed(!collapsed)}
+            style={styles.toggleButton}
+          >
+            <SidebarIcon color={colors.grey100} size={TOGGLE_SIZE} strokeWidth={2} />
+          </Pressable>
+        ) : null}
       </View>
 
       <View
@@ -242,6 +253,9 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     paddingHorizontal: 24,
   },
+  headerNoToggle: {
+    justifyContent: "flex-start",
+  },
   headerCollapsed: {
     justifyContent: "center",
     paddingHorizontal: 0,

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",
+  },
+});