@ecohouse/ui 0.1.18 → 0.1.19

package/package.json

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

package/src/components/Range/Range.stories.tsx

@@ -0,0 +1,128 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Range } from "./Range";
+import type { RangeValue } from "./Range.types";
+
+const meta = {
+  title: "Components/Range",
+  component: Range,
+  args: {
+    min: 0,
+    max: 1_000_000,
+    step: 10_000,
+    fromPlaceholder: "Սկսած",
+    toPlaceholder: "Մինչև",
+    currency: "֏",
+  },
+  argTypes: {
+    min: { control: "number" },
+    max: { control: "number" },
+    step: { control: "number" },
+    disabled: { control: "boolean" },
+    onValueChange: { action: "valueChange" },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+    layout: "centered",
+  },
+} satisfies Meta<typeof Range>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const English: Story = {
+  args: {
+    fromPlaceholder: "From",
+    toPlaceholder: "To",
+    fromAccessibilityLabel: "Minimum price",
+    toAccessibilityLabel: "Maximum price",
+  },
+};
+
+export const Russian: Story = {
+  args: {
+    fromPlaceholder: "От",
+    toPlaceholder: "До",
+    fromAccessibilityLabel: "Минимальная цена",
+    toAccessibilityLabel: "Максимальная цена",
+  },
+};
+
+export const WithValues: Story = {
+  args: {
+    defaultValue: { from: 200_000, to: 800_000 },
+  },
+};
+
+const armenianNumberFormatter = new Intl.NumberFormat("hy-AM");
+const armenianNumberParts = armenianNumberFormatter.formatToParts(-12_345.6);
+const armenianGroupSeparator = armenianNumberParts.find((part) => part.type === "group")?.value;
+const armenianDecimalSeparator = armenianNumberParts.find((part) => part.type === "decimal")?.value;
+const armenianMinusSign = armenianNumberParts.find((part) => part.type === "minusSign")?.value;
+
+function parseArmenianNumber(value: string) {
+  let normalized = value;
+  if (armenianGroupSeparator) {
+    normalized = normalized.split(armenianGroupSeparator).join("");
+  }
+  if (armenianDecimalSeparator && armenianDecimalSeparator !== ".") {
+    normalized = normalized.replace(armenianDecimalSeparator, ".");
+  }
+  if (armenianMinusSign && armenianMinusSign !== "-") {
+    normalized = normalized.replace(armenianMinusSign, "-");
+  }
+  normalized = normalized.replace(/\s/g, "");
+  if (!normalized) return 0;
+
+  const parsed = Number(normalized);
+  return Number.isFinite(parsed) ? parsed : undefined;
+}
+
+export const LocalizedFormatting: Story = {
+  args: {
+    defaultValue: { from: 125_000, to: 875_000 },
+    formatValue: (value) => armenianNumberFormatter.format(value),
+    parseValue: parseArmenianNumber,
+  },
+};
+
+export const DecimalNonZeroMinimum: Story = {
+  args: {
+    min: 0.25,
+    max: 1,
+    step: 0.1,
+    defaultValue: { from: 0.35, to: 0.85 },
+    currency: "",
+  },
+};
+
+export const OffStepValues: Story = {
+  args: {
+    min: 0,
+    max: 100,
+    step: 10,
+    defaultValue: { from: 23, to: 78 },
+    currency: "",
+  },
+};
+
+export const CoincidentHandles: Story = {
+  args: {
+    defaultValue: { from: 500_000, to: 500_000 },
+  },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+function ControlledRange() {
+  const [value, setValue] = useState<RangeValue>({ from: 250_000, to: 750_000 });
+  return <Range min={0} max={1_000_000} step={10_000} value={value} onValueChange={setValue} />;
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledRange />,
+};

package/src/components/Range/Range.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it } from "vitest";
+import { clampAndSnap, normalizeRangeValue, parseRangeDraft, snapRangeDelta } from "./Range.utils";
+
+describe("normalizeRangeValue", () => {
+  it("clamps values to the configured bounds", () => {
+    expect(normalizeRangeValue({ from: -10, to: 120 }, 0, 100)).toEqual({
+      from: 0,
+      to: 100,
+    });
+  });
+
+  it("preserves exact in-bounds values entered in the fields", () => {
+    expect(normalizeRangeValue({ from: 23, to: 78 }, 0, 100)).toEqual({
+      from: 23,
+      to: 78,
+    });
+  });
+
+  it("orders reversed endpoints", () => {
+    expect(normalizeRangeValue({ from: 80, to: 20 }, 0, 100)).toEqual({
+      from: 20,
+      to: 80,
+    });
+  });
+
+  it("preserves empty endpoints", () => {
+    expect(normalizeRangeValue({}, 0, 100)).toEqual({
+      from: undefined,
+      to: undefined,
+    });
+  });
+});
+
+describe("parseRangeDraft", () => {
+  it("keeps a cleared field empty even when a custom parser maps an empty string to zero", () => {
+    expect(parseRangeDraft("", Number)).toEqual({ kind: "empty" });
+    expect(parseRangeDraft("   ", Number)).toEqual({ kind: "empty" });
+  });
+
+  it("distinguishes invalid localized text from an intentionally empty field", () => {
+    const parser = (draft: string) => {
+      const parsed = Number(draft.replace(/ /g, ""));
+      return Number.isFinite(parsed) ? parsed : undefined;
+    };
+
+    expect(parseRangeDraft("12 500", parser)).toEqual({ kind: "value", value: 12_500 });
+    expect(parseRangeDraft("not a number", parser)).toEqual({ kind: "invalid" });
+    expect(parseRangeDraft("Infinity", () => Number.POSITIVE_INFINITY)).toEqual({
+      kind: "invalid",
+    });
+  });
+});
+
+describe("clampAndSnap", () => {
+  it("snaps relative to a non-zero minimum", () => {
+    expect(clampAndSnap(13, 3, 23, 5)).toBe(13);
+    expect(clampAndSnap(15, 3, 23, 5)).toBe(13);
+    expect(clampAndSnap(16, 3, 23, 5)).toBe(18);
+  });
+
+  it("preserves decimal step precision", () => {
+    expect(clampAndSnap(0.26, 0, 1, 0.1)).toBe(0.3);
+    expect(clampAndSnap(0.35, 0.25, 1, 0.1)).toBe(0.35);
+    expect(clampAndSnap(3e-7, 0, 1, 1e-7)).toBe(3e-7);
+  });
+});
+
+describe("snapRangeDelta", () => {
+  it("keeps dragging anchored to an exact off-grid input value", () => {
+    expect(snapRangeDelta(23, 0.3, 10)).toBe(23);
+    expect(snapRangeDelta(23, 5.1, 10)).toBe(33);
+    expect(snapRangeDelta(23, -5.1, 10)).toBe(13);
+  });
+
+  it("preserves fractional starting values", () => {
+    expect(snapRangeDelta(0.35, 0.11, 0.1)).toBe(0.45);
+  });
+});