@pichetch08/trip-ui 0.2.1 → 0.2.3

package/dist/components/shared/modal.js

@@ -29,12 +29,21 @@ function Modal({
   useEffect(() => {
     if (!open) return;
     const dialog = dialogRef.current;
-    const focusables = dialog == null ? void 0 : dialog.querySelectorAll(
-      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    const firstInput = dialog == null ? void 0 : dialog.querySelector(
+      "input:not([disabled]), textarea:not([disabled])"
     );
-    if (focusables && focusables.length > 0) {
-      focusables[0].focus();
+    if (firstInput) {
+      firstInput.focus();
+      return;
     }
+    const first = dialog == null ? void 0 : dialog.querySelector(
+      'button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])'
+    );
+    first == null ? void 0 : first.focus();
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const dialog = dialogRef.current;
     const onKey = (e) => {
       if (e.key === "Escape" && !blocking) {
         e.preventDefault();

package/dist/components/shared/select-picker.d.ts

@@ -16,9 +16,10 @@ interface SelectPickerProps {
     searchable?: boolean;
     icon?: string;
     name?: string;
+    size?: "sm" | "md";
     onOpen?: () => void;
     onClose?: () => void;
 }
-declare function SelectPicker({ label, value, onChange, options, placeholder, searchPlaceholder, emptyText, required, error, searchable, icon, name, onOpen, onClose, }: SelectPickerProps): React.ReactNode;
+declare function SelectPicker({ label, value, onChange, options, placeholder, searchPlaceholder, emptyText, required, error, searchable, icon, name, size, onOpen, onClose, }: SelectPickerProps): React.ReactNode;
 
 export { type SelectOption, SelectPicker };

package/dist/components/shared/select-picker.js

@@ -15,6 +15,7 @@ function SelectPicker({
   searchable = true,
   icon,
   name,
+  size = "md",
   onOpen,
   onClose
 }) {
@@ -93,14 +94,14 @@ function SelectPicker({
         "aria-controls": "select-picker-listbox",
         "aria-required": required,
         onClick: () => toggleOpen(!open),
-        className: `relative w-full bg-surface-container-low border rounded-xl py-4 px-6 text-left transition-all duration-200 font-medium outline-none active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 ${icon ? "pl-12" : ""} pr-10 ${open ? "bg-surface ring-2 ring-primary/20 border-primary" : error ? "border-red-400 bg-red-50/30" : "border-transparent hover:border-outline-variant"}`,
+        className: `relative w-full bg-surface-container-low border rounded-xl text-left transition-all duration-200 font-medium outline-none active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 pr-10 ${size === "sm" ? "py-2 px-3 text-sm" : "py-4 px-6"} ${icon ? size === "sm" ? "pl-8" : "pl-12" : ""} ${open ? "bg-surface ring-2 ring-primary/20 border-primary" : error ? "border-red-400 bg-red-50/30" : "border-transparent hover:border-outline-variant"}`,
         children: [
-          icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-on-surface-variant", children: icon }),
+          icon && /* @__PURE__ */ jsx("span", { className: `material-symbols-outlined absolute top-1/2 -translate-y-1/2 text-on-surface-variant ${size === "sm" ? "left-2.5 text-base" : "left-4"}`, children: icon }),
           selectedOption ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-on-surface", children: [
             selectedOption.icon && /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined text-base text-on-surface-variant", children: selectedOption.icon }),
             selectedOption.label
           ] }) : /* @__PURE__ */ jsx("span", { className: "text-outline/40", children: placeholder }),
-          /* @__PURE__ */ jsx("span", { className: `material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-lg transition-transform ${open ? "rotate-180" : ""}`, children: "expand_more" })
+          /* @__PURE__ */ jsx("span", { className: `material-symbols-outlined absolute right-2.5 top-1/2 -translate-y-1/2 text-on-surface-variant transition-transform ${size === "sm" ? "text-base" : "text-lg"} ${open ? "rotate-180" : ""}`, children: "expand_more" })
         ]
       }
     ),

package/dist/utils/trip-utils.test.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/utils/trip-utils.test.js

@@ -0,0 +1,236 @@
+import { describe, it, expect } from "vitest";
+import {
+  getDaysUntil,
+  getTripDuration,
+  getDayGradientClass,
+  getActivityTypeStyle,
+  getActivityEmoji,
+  getDayEmoji,
+  detectMapProvider,
+  detectMapProviderFromActivities,
+  buildRouteUrl,
+  getMapProviderLabel,
+  getMapButtonLabel,
+  getRouteButtonLabel,
+  formatDateRange,
+  cn
+} from "./trip-utils";
+describe("cn", () => {
+  it("merges class names", () => {
+    expect(cn("a", "b")).toBe("a b");
+  });
+  it("handles conditional falsy values", () => {
+    expect(cn("a", false, void 0, null, "c")).toBe("a c");
+  });
+  it("merges tailwind conflicts correctly (last wins)", () => {
+    const result = cn("px-2", "px-4");
+    expect(result).toBe("px-4");
+  });
+});
+describe("getDaysUntil", () => {
+  it("returns a positive number for a future date", () => {
+    const future = new Date(Date.now() + 5 * 24 * 60 * 60 * 1e3).toISOString().split("T")[0];
+    expect(getDaysUntil(future)).toBeGreaterThan(0);
+  });
+  it("returns a negative number for a past date", () => {
+    const past = new Date(Date.now() - 5 * 24 * 60 * 60 * 1e3).toISOString().split("T")[0];
+    expect(getDaysUntil(past)).toBeLessThan(0);
+  });
+});
+describe("getTripDuration", () => {
+  it("returns 1 for same-day start and end", () => {
+    expect(getTripDuration("2026-06-01", "2026-06-01")).toBe(1);
+  });
+  it("returns correct count for multi-day trip", () => {
+    expect(getTripDuration("2026-06-01", "2026-06-07")).toBe(7);
+  });
+  it("returns 3 for a 3-day trip", () => {
+    expect(getTripDuration("2026-06-10", "2026-06-12")).toBe(3);
+  });
+});
+describe("getDayGradientClass", () => {
+  it("returns a non-empty class string", () => {
+    expect(getDayGradientClass(1)).toBeTruthy();
+    expect(typeof getDayGradientClass(1)).toBe("string");
+  });
+  it("cycles through 8 gradients", () => {
+    expect(getDayGradientClass(1)).toBe(getDayGradientClass(9));
+    expect(getDayGradientClass(2)).toBe(getDayGradientClass(10));
+  });
+  it("returns different classes for different days within a cycle", () => {
+    const classes = new Set([1, 2, 3, 4, 5, 6, 7, 8].map(getDayGradientClass));
+    expect(classes.size).toBe(8);
+  });
+});
+describe("getActivityTypeStyle", () => {
+  it.each(["attraction", "restaurant", "hotel", "transport", "shopping", "other"])(
+    "returns bg, text, border for type '%s'",
+    (type) => {
+      const style = getActivityTypeStyle(type);
+      expect(style.bg).toBeTruthy();
+      expect(style.text).toBeTruthy();
+      expect(style.border).toBeTruthy();
+    }
+  );
+  it("falls back to 'other' style for unknown type", () => {
+    expect(getActivityTypeStyle("unknown")).toEqual(getActivityTypeStyle("other"));
+  });
+  it("returns different styles for different types", () => {
+    expect(getActivityTypeStyle("attraction")).not.toEqual(getActivityTypeStyle("restaurant"));
+    expect(getActivityTypeStyle("hotel")).not.toEqual(getActivityTypeStyle("transport"));
+  });
+});
+describe("getActivityEmoji", () => {
+  it("returns the custom emoji when provided", () => {
+    expect(getActivityEmoji("\u{1F3EF}", "attraction")).toBe("\u{1F3EF}");
+  });
+  it("returns type-based emoji when custom emoji is empty", () => {
+    const emoji = getActivityEmoji("", "restaurant");
+    expect(emoji).toBeTruthy();
+    expect(emoji).not.toBe("");
+  });
+  it("returns type-based emoji when custom emoji is undefined", () => {
+    const emoji = getActivityEmoji(void 0, "hotel");
+    expect(emoji).toBeTruthy();
+  });
+  it("returns a fallback for unknown type", () => {
+    const emoji = getActivityEmoji("", "unknown-type");
+    expect(emoji).toBeTruthy();
+  });
+  it("returns the custom emoji even if it only contains whitespace \u2014 trims it", () => {
+    const emoji = getActivityEmoji("   ", "attraction");
+    expect(emoji).not.toBe("   ");
+  });
+});
+describe("getDayEmoji", () => {
+  it("returns the first word when subtitle starts with a non-ASCII char (emoji)", () => {
+    expect(getDayEmoji("\u{1F305} \u0E0A\u0E21\u0E1E\u0E23\u0E30\u0E2D\u0E32\u0E17\u0E34\u0E15\u0E22\u0E4C", 0)).toBe("\u{1F305}");
+  });
+  it("falls back to a rotated list emoji when subtitle is undefined", () => {
+    const e = getDayEmoji(void 0, 0);
+    expect(e).toBeTruthy();
+  });
+  it("rotates through list when subtitle is plain text", () => {
+    const e0 = getDayEmoji("Day at the beach", 0);
+    const e1 = getDayEmoji("Day at the beach", 1);
+    expect(e0).not.toBe(e1);
+  });
+  it("cycles emojis via modulo", () => {
+    expect(getDayEmoji(void 0, 0)).toBe(getDayEmoji(void 0, 8));
+  });
+});
+describe("detectMapProvider", () => {
+  it.each([
+    ["https://www.google.com/maps/place/Osaka", "google"],
+    ["https://maps.google.com/?q=35,139", "google"],
+    ["https://map.baidu.com/poi", "baidu"],
+    ["https://www.amap.com/place/abc", "amap"],
+    ["https://uri.amap.com/navigation", "amap"],
+    ["https://maps.apple.com/?q=Tokyo", "apple"]
+  ])("detects %s as %s", (url, expected) => {
+    expect(detectMapProvider(url)).toBe(expected);
+  });
+  it("returns 'unknown' for empty string", () => {
+    expect(detectMapProvider("")).toBe("unknown");
+  });
+  it("returns 'unknown' for unrecognised URL", () => {
+    expect(detectMapProvider("https://maps.yahoo.com/")).toBe("unknown");
+  });
+});
+describe("detectMapProviderFromActivities", () => {
+  it("returns 'unknown' when no activities have mapsLink", () => {
+    expect(detectMapProviderFromActivities([
+      { mapsLink: "", placeName: "A" },
+      { mapsLink: "", placeName: "B" }
+    ])).toBe("unknown");
+  });
+  it("uses the first activity with a mapsLink", () => {
+    const result = detectMapProviderFromActivities([
+      { mapsLink: "", placeName: "A" },
+      { mapsLink: "https://www.google.com/maps/place/B", placeName: "B" },
+      { mapsLink: "https://map.baidu.com/place/C", placeName: "C" }
+    ]);
+    expect(result).toBe("google");
+  });
+});
+describe("buildRouteUrl", () => {
+  it("returns null when fewer than 2 places provided", () => {
+    expect(buildRouteUrl([], "google")).toBeNull();
+    expect(buildRouteUrl(["Only one"], "google")).toBeNull();
+  });
+  it("builds a Google Maps route URL for 2 places", () => {
+    const url = buildRouteUrl(["Osaka Castle", "Dotonbori"], "google");
+    expect(url).toContain("google.com/maps/dir");
+    expect(url).toContain(encodeURIComponent("Osaka Castle"));
+  });
+  it("includes intermediate waypoints in Google URL", () => {
+    const url = buildRouteUrl(["A", "B", "C"], "google");
+    expect(url).toContain(encodeURIComponent("B"));
+  });
+  it("builds a Baidu route URL", () => {
+    const url = buildRouteUrl(["\u4E0A\u6D77", "\u5317\u4EAC"], "baidu");
+    expect(url).toContain("map.baidu.com");
+    expect(url).toContain(encodeURIComponent("\u4E0A\u6D77"));
+  });
+  it("builds an Amap route URL", () => {
+    const url = buildRouteUrl(["\u6210\u90FD", "\u91CD\u5E86"], "amap");
+    expect(url).toContain("amap.com");
+  });
+  it("builds an Apple Maps route URL", () => {
+    const url = buildRouteUrl(["Tokyo", "Kyoto"], "apple");
+    expect(url).toContain("maps.apple.com");
+  });
+  it("falls back to Google for unknown provider", () => {
+    const url = buildRouteUrl(["A", "B"], "unknown");
+    expect(url).toContain("google.com/maps/dir");
+  });
+});
+describe("getMapProviderLabel", () => {
+  it.each([
+    ["google", "Google Maps"],
+    ["baidu", "\u767E\u5EA6\u5730\u56FE"],
+    ["amap", "\u9AD8\u5FB7\u5730\u56FE"],
+    ["apple", "Apple Maps"],
+    ["unknown", "\u0E41\u0E1C\u0E19\u0E17\u0E35\u0E48"]
+  ])("returns '%s' label for provider '%s'", (provider, label) => {
+    expect(getMapProviderLabel(provider)).toBe(label);
+  });
+});
+describe("getMapButtonLabel", () => {
+  it("returns Thai-script label for google/unknown", () => {
+    expect(getMapButtonLabel("google")).toBe("\u0E40\u0E1B\u0E34\u0E14\u0E41\u0E1C\u0E19\u0E17\u0E35\u0E48");
+    expect(getMapButtonLabel("unknown")).toBe("\u0E40\u0E1B\u0E34\u0E14\u0E41\u0E1C\u0E19\u0E17\u0E35\u0E48");
+  });
+  it("includes provider name for baidu/amap/apple", () => {
+    expect(getMapButtonLabel("baidu")).toContain("\u767E\u5EA6");
+    expect(getMapButtonLabel("amap")).toContain("\u9AD8\u5FB7");
+    expect(getMapButtonLabel("apple")).toContain("Apple");
+  });
+});
+describe("getRouteButtonLabel", () => {
+  it("returns route label for each provider", () => {
+    expect(getRouteButtonLabel("google")).toContain("\u0E14\u0E39\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07");
+    expect(getRouteButtonLabel("baidu")).toContain("\u767E\u5EA6\u5730\u56FE");
+    expect(getRouteButtonLabel("amap")).toContain("\u9AD8\u5FB7\u5730\u56FE");
+    expect(getRouteButtonLabel("apple")).toContain("Apple Maps");
+  });
+});
+describe("formatDateRange", () => {
+  it("uses condensed format when start and end are in the same month", () => {
+    const result = formatDateRange("2026-06-01", "2026-06-07");
+    expect(result).toMatch(/1/);
+    expect(result).toMatch(/7/);
+    expect(result).toMatch(/Jun/);
+    const junCount = (result.match(/Jun/g) || []).length;
+    expect(junCount).toBe(1);
+  });
+  it("uses expanded format when start and end are in different months", () => {
+    const result = formatDateRange("2026-05-28", "2026-06-03");
+    expect(result).toContain("May");
+    expect(result).toContain("Jun");
+  });
+  it("includes the year of the end date", () => {
+    const result = formatDateRange("2026-06-01", "2026-06-07");
+    expect(result).toContain("2026");
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pichetch08/trip-ui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Trip UI — shared React component library built with Tailwind v4 and Material Design 3 tokens",
   "author": "pichetch08",
   "license": "MIT",