@bearmenu/ui 0.1.1 → 0.5.1

package/src/components/phone-frame.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PhoneFrame } from "./phone-frame";
+
+const meta = {
+  title: "Components/PhoneFrame",
+  component: PhoneFrame,
+  tags: ["autodocs"],
+  argTypes: {
+    width: { control: { type: "range", min: 160, max: 360, step: 10 } },
+  },
+} satisfies Meta<typeof PhoneFrame>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { width: 220 },
+  render: (args) => (
+    <PhoneFrame {...args}>
+      <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-amber-100 to-amber-300 text-sm font-medium text-amber-950">
+        Mobile preview
+      </div>
+    </PhoneFrame>
+  ),
+};
+
+export const Wide: Story = {
+  args: { width: 320 },
+  render: (args) => (
+    <PhoneFrame {...args}>
+      <div className="flex h-full w-full items-center justify-center bg-slate-900 text-white">
+        320px wide
+      </div>
+    </PhoneFrame>
+  ),
+};
+
+export const ScrollableContent: Story = {
+  args: { width: 240 },
+  render: (args) => (
+    <PhoneFrame {...args}>
+      <div className="h-full w-full overflow-y-auto bg-white p-3">
+        {Array.from({ length: 20 }, (_, i) => (
+          <div key={i} className="border-b py-2 text-xs text-slate-700">
+            Item {i + 1}
+          </div>
+        ))}
+      </div>
+    </PhoneFrame>
+  ),
+};

package/src/components/phone-frame.test.tsx

@@ -0,0 +1,82 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { PhoneFrame } from "./phone-frame";
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("PhoneFrame", () => {
+  it("renders children inside the frame", () => {
+    render(
+      <PhoneFrame>
+        <div data-testid="inner-content">Page content</div>
+      </PhoneFrame>
+    );
+    expect(screen.getByTestId("inner-content")).toBeInTheDocument();
+    expect(screen.getByText("Page content")).toBeInTheDocument();
+  });
+
+  it("applies the default width of 220 when width prop is omitted", () => {
+    const { container } = render(
+      <PhoneFrame>
+        <span>child</span>
+      </PhoneFrame>
+    );
+    // The outermost div receives the inline style width
+    const outerDiv = container.firstChild as HTMLElement;
+    expect(outerDiv.style.width).toBe("220px");
+  });
+
+  it("applies a custom width when width prop is provided", () => {
+    const { container } = render(
+      <PhoneFrame width={320}>
+        <span>child</span>
+      </PhoneFrame>
+    );
+    const outerDiv = container.firstChild as HTMLElement;
+    expect(outerDiv.style.width).toBe("320px");
+  });
+
+  it("calculates screen height from iPhone 17 Pro Max aspect ratio", () => {
+    // aspect = 956/440 ≈ 2.1727; width=220 → height = round(220 * 956/440) = round(477.8) = 478
+    const { container } = render(
+      <PhoneFrame width={220}>
+        <span>child</span>
+      </PhoneFrame>
+    );
+    // The inner screen div has the computed height as inline style
+    const screenDiv = container.querySelector<HTMLElement>(".rounded-\\[2rem\\]");
+    expect(screenDiv).not.toBeNull();
+    expect(screenDiv!.style.height).toBe("478px");
+  });
+
+  it("does not assign an ARIA role — the frame is purely presentational", () => {
+    const { container } = render(
+      <PhoneFrame>
+        <span>child</span>
+      </PhoneFrame>
+    );
+    const outerDiv = container.firstChild as HTMLElement;
+    expect(outerDiv.getAttribute("role")).toBeNull();
+  });
+
+  it("applies a custom className to the outer container", () => {
+    const { container } = render(
+      <PhoneFrame className="my-custom-class">
+        <span>child</span>
+      </PhoneFrame>
+    );
+    const outerDiv = container.firstChild as HTMLElement;
+    expect(outerDiv.className).toContain("my-custom-class");
+  });
+
+  it("renders multiple children correctly", () => {
+    render(
+      <PhoneFrame>
+        <div data-testid="a">A</div>
+        <div data-testid="b">B</div>
+      </PhoneFrame>
+    );
+    expect(screen.getByTestId("a")).toBeInTheDocument();
+    expect(screen.getByTestId("b")).toBeInTheDocument();
+  });
+});

package/src/components/phone-frame.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { cn } from "../lib/utils";
+
+const SCREEN_ASPECT = 956 / 440; // iPhone 17 Pro Max
+
+export interface PhoneFrameProps {
+  children: React.ReactNode;
+  className?: string;
+  /** Outer frame width in pixels. Height derives from iPhone 17 Pro Max aspect. Default 220. */
+  width?: number;
+  /**
+   * When set, children are rendered at this virtual viewport width and CSS-scaled
+   * to fit the actual frame. Use this to render mobile UIs at native sizing
+   * (e.g. 390 for iPhone 13/14/15) while displaying inside a smaller frame.
+   */
+  mobileViewportWidth?: number;
+}
+
+const FRAME_PADDING = 6; // matches `p-1.5` (1.5 * 4 = 6px each side)
+
+export function PhoneFrame({
+  children,
+  className,
+  width = 220,
+  mobileViewportWidth,
+}: PhoneFrameProps) {
+  const screenHeight = Math.round(width * SCREEN_ASPECT);
+  const innerWidth = width - FRAME_PADDING * 2;
+  const scale = mobileViewportWidth ? innerWidth / mobileViewportWidth : 1;
+  const viewportHeight = mobileViewportWidth ? screenHeight / scale : screenHeight;
+
+  return (
+    <div className={cn("relative mx-auto shrink-0", className)} style={{ width }}>
+      <div className="rounded-[2.5rem] border-[1.5px] border-white/15 bg-black/80 p-1.5 shadow-2xl shadow-black/40">
+        <div className="absolute top-[10px] left-1/2 -translate-x-1/2 w-[68px] h-[20px] bg-black rounded-full z-10" />
+        <div
+          className="rounded-[2rem] overflow-hidden bg-background relative"
+          style={{ height: screenHeight }}
+        >
+          {mobileViewportWidth ? (
+            <div
+              style={{
+                width: mobileViewportWidth,
+                height: viewportHeight,
+                transform: `scale(${scale})`,
+                transformOrigin: "top left",
+              }}
+            >
+              {children}
+            </div>
+          ) : (
+            children
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/place-about-tab.stories.tsx

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PlaceAboutTab } from "./place-about-tab";
+import type { PlaceAboutTabLabels, PlacePreview } from "./place-types";
+
+const labels: PlaceAboutTabLabels = {
+  overview: "Overview",
+  description: "Description",
+  whatPeopleSay: "What people say",
+  contactAndLocation: "Contact & Location",
+  address: "Address",
+  instagram: "Instagram",
+  facebook: "Facebook",
+  todayHours: "Today's hours",
+  statusOpen: "Open now",
+  statusClosed: "Closed",
+  typicalBusyness: "Typical busyness",
+  cuisines: "Cuisines",
+  amenities: "Amenities",
+  paymentOptions: "Payment options",
+  accessibility: "Accessibility",
+  parking: "Parking",
+  nearbyLandmarks: "Nearby landmarks",
+  neighborhood: "Neighborhood",
+  businessInformation: "Business information",
+  type: "Type",
+  status: "Status",
+  amenityLabels: {
+    wifi: "Wi-Fi",
+    outdoor_seating: "Outdoor seating",
+    dine_in: "Dine in",
+    delivery: "Delivery",
+  },
+  paymentLabels: {
+    credit_card: "Credit card",
+    cash: "Cash",
+  },
+  accessibilityLabels: {
+    wheelchair_accessible_entrance: "Wheelchair accessible entrance",
+  },
+  parkingLabels: {
+    free_parking: "Free parking",
+  },
+  typeLabels: {
+    restaurant: "Restaurant",
+    cafe: "Cafe",
+  },
+  statusLabels: {
+    operational: "Operational",
+    closed_temporarily: "Closed temporarily",
+    closed_permanently: "Closed permanently",
+  },
+};
+
+const richPlace: PlacePreview = {
+  id: "1",
+  slug: "casa-gri",
+  name: "Casa Gri",
+  description: "A modern bistro serving European plates with a Mediterranean accent.",
+  generative_summary:
+    "Beloved bistro known for its seasonal small plates, natural wines, and warm patio.",
+  review_summary:
+    "Diners praise the friendly service and the lamb shoulder; some note that reservations are essential on weekends.",
+  open_now: true,
+  hours: [{ opens_at: 11, closes_at: 23 }],
+  location: { address: "Strada Mihai Eminescu 15, București" },
+  phone: "+40 21 555 0123",
+  website_url: "https://casagri.example.com",
+  socials: {
+    instagram_url: "https://instagram.com/casagri",
+    facebook_url: "https://facebook.com/casagri",
+  },
+  cuisines: ["mediterranean", "european", "wine bar"],
+  amenities: ["wifi", "outdoor_seating", "dine_in", "delivery"],
+  payment_options: ["credit_card", "cash"],
+  accessibility_features: ["wheelchair_accessible_entrance"],
+  parking_options: ["free_parking"],
+  landmarks: [
+    { name: "Cișmigiu Park", distance_meters: 350 },
+    { name: "Piața Universității", distance_meters: 1200 },
+  ],
+  areas: [{ name: "Sector 1" }, { name: "Centru" }],
+  type: "restaurant",
+  business_status: "operational",
+  busyness: [
+    { hour: 11, score: 20 },
+    { hour: 12, score: 65 },
+    { hour: 13, score: 90 },
+    { hour: 14, score: 80 },
+  ],
+};
+
+const meta = {
+  title: "Components/PlaceAboutTab",
+  component: PlaceAboutTab,
+  tags: ["autodocs"],
+  args: { labels, place: richPlace },
+} satisfies Meta<typeof PlaceAboutTab>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[640px] mx-auto">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Minimal: Story = {
+  args: {
+    place: {
+      id: "2",
+      slug: "tiny",
+      name: "Tiny Place",
+      description: "Just enough to be discoverable.",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[640px] mx-auto">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithSlots: Story = {
+  args: {
+    mapSlot: (
+      <div className="h-[200px] rounded-lg bg-muted flex items-center justify-center text-muted-foreground text-sm">
+        [Map slot]
+      </div>
+    ),
+    busynessSlot: (
+      <div className="h-[120px] rounded-lg bg-muted flex items-center justify-center text-muted-foreground text-sm">
+        [Busyness chart slot]
+      </div>
+    ),
+    onLinkClick: (kind, url) => console.log("link click", kind, url),
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[640px] mx-auto">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const Closed: Story = {
+  args: {
+    place: { ...richPlace, open_now: false, business_status: "closed_temporarily" },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[640px] mx-auto">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/place-about-tab.test.tsx

@@ -0,0 +1,325 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { PlaceAboutTab } from "./place-about-tab";
+import type { PlaceAboutTabLabels, PlacePreview } from "./place-types";
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+const LABELS: PlaceAboutTabLabels = {
+  overview: "Overview",
+  description: "Description",
+  whatPeopleSay: "What people say",
+  contactAndLocation: "Contact & Location",
+  address: "Address",
+  instagram: "Instagram",
+  facebook: "Facebook",
+  todayHours: "Today's hours",
+  statusOpen: "Open now",
+  statusClosed: "Closed",
+  typicalBusyness: "Typical busyness",
+  cuisines: "Cuisines",
+  amenities: "Amenities",
+  paymentOptions: "Payment options",
+  accessibility: "Accessibility",
+  parking: "Parking",
+  nearbyLandmarks: "Nearby landmarks",
+  neighborhood: "Neighborhood",
+  businessInformation: "Business information",
+  type: "Type",
+  status: "Status",
+  amenityLabels: { wifi: "Free Wi-Fi" },
+  paymentLabels: {},
+  accessibilityLabels: {},
+  parkingLabels: {},
+  typeLabels: {},
+  statusLabels: {},
+};
+
+function makePlace(overrides: Partial<PlacePreview> = {}): PlacePreview {
+  return {
+    id: "1",
+    slug: "test-place",
+    name: "Test Place",
+    ...overrides,
+  };
+}
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe("PlaceAboutTab", () => {
+  // ─── Contact section: each field conditionally rendered ─────────────────────
+
+  it("renders phone link only when place.phone is provided", () => {
+    const { rerender } = render(
+      <PlaceAboutTab place={makePlace({ phone: "+40700000000" })} labels={LABELS} />
+    );
+    expect(screen.getByText("+40700000000")).toBeInTheDocument();
+
+    rerender(<PlaceAboutTab place={makePlace()} labels={LABELS} />);
+    expect(screen.queryByText("+40700000000")).not.toBeInTheDocument();
+  });
+
+  it("renders website link only when place.website_url is provided", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ website_url: "https://example.com" })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("https://example.com")).toBeInTheDocument();
+  });
+
+  it("does not render website link when website_url is absent", () => {
+    render(<PlaceAboutTab place={makePlace()} labels={LABELS} />);
+    expect(screen.queryByRole("link", { name: /http/ })).not.toBeInTheDocument();
+  });
+
+  it("renders Instagram link only when place.socials.instagram_url is provided", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ socials: { instagram_url: "https://instagram.com/test" } })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("Instagram")).toBeInTheDocument();
+  });
+
+  it("does not render Instagram link when socials.instagram_url is absent", () => {
+    render(<PlaceAboutTab place={makePlace()} labels={LABELS} />);
+    expect(screen.queryByText("Instagram")).not.toBeInTheDocument();
+  });
+
+  it("renders Facebook link only when place.socials.facebook_url is provided", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ socials: { facebook_url: "https://facebook.com/test" } })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("Facebook")).toBeInTheDocument();
+  });
+
+  it("does not render Facebook link when socials.facebook_url is absent", () => {
+    render(<PlaceAboutTab place={makePlace()} labels={LABELS} />);
+    expect(screen.queryByText("Facebook")).not.toBeInTheDocument();
+  });
+
+  // ─── mapSlot ────────────────────────────────────────────────────────────────
+
+  it("renders mapSlot when prop is passed (regardless of busyness data)", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace()}
+        labels={LABELS}
+        mapSlot={<div data-testid="map-slot">Map</div>}
+      />
+    );
+    expect(screen.getByTestId("map-slot")).toBeInTheDocument();
+  });
+
+  it("does not render mapSlot content when prop is omitted", () => {
+    render(<PlaceAboutTab place={makePlace()} labels={LABELS} />);
+    expect(screen.queryByTestId("map-slot")).not.toBeInTheDocument();
+  });
+
+  // ─── busynessSlot ───────────────────────────────────────────────────────────
+
+  it("renders busynessSlot when both the prop and place.busyness entries are present", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ busyness: [{ hour: 12, score: 80 }] })}
+        labels={LABELS}
+        busynessSlot={<div data-testid="busyness-slot">Chart</div>}
+      />
+    );
+    expect(screen.getByTestId("busyness-slot")).toBeInTheDocument();
+  });
+
+  it("does NOT render busynessSlot when prop is present but place.busyness is empty", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ busyness: [] })}
+        labels={LABELS}
+        busynessSlot={<div data-testid="busyness-slot">Chart</div>}
+      />
+    );
+    expect(screen.queryByTestId("busyness-slot")).not.toBeInTheDocument();
+  });
+
+  it("does NOT render busynessSlot when prop is present but place.busyness is absent", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace()}
+        labels={LABELS}
+        busynessSlot={<div data-testid="busyness-slot">Chart</div>}
+      />
+    );
+    expect(screen.queryByTestId("busyness-slot")).not.toBeInTheDocument();
+  });
+
+  it("does NOT render busynessSlot when the prop is omitted even if busyness data exists", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ busyness: [{ hour: 12, score: 80 }] })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.queryByTestId("busyness-slot")).not.toBeInTheDocument();
+  });
+
+  // ─── onLinkClick ────────────────────────────────────────────────────────────
+
+  it("fires onLinkClick with kind='phone' and correct url on phone click", () => {
+    const onLinkClick = vi.fn();
+    render(
+      <PlaceAboutTab
+        place={makePlace({ phone: "+40700000000" })}
+        labels={LABELS}
+        onLinkClick={onLinkClick}
+      />
+    );
+    fireEvent.click(screen.getByText("+40700000000"));
+    expect(onLinkClick).toHaveBeenCalledWith("phone", "+40700000000");
+  });
+
+  it("fires onLinkClick with kind='website' on website click", () => {
+    const onLinkClick = vi.fn();
+    render(
+      <PlaceAboutTab
+        place={makePlace({ website_url: "https://example.com" })}
+        labels={LABELS}
+        onLinkClick={onLinkClick}
+      />
+    );
+    fireEvent.click(screen.getByText("https://example.com"));
+    expect(onLinkClick).toHaveBeenCalledWith("website", "https://example.com");
+  });
+
+  it("fires onLinkClick with kind='instagram' on instagram click", () => {
+    const onLinkClick = vi.fn();
+    render(
+      <PlaceAboutTab
+        place={makePlace({ socials: { instagram_url: "https://instagram.com/test" } })}
+        labels={LABELS}
+        onLinkClick={onLinkClick}
+      />
+    );
+    fireEvent.click(screen.getByText("Instagram"));
+    expect(onLinkClick).toHaveBeenCalledWith(
+      "instagram",
+      "https://instagram.com/test"
+    );
+  });
+
+  it("fires onLinkClick with kind='facebook' on facebook click", () => {
+    const onLinkClick = vi.fn();
+    render(
+      <PlaceAboutTab
+        place={makePlace({ socials: { facebook_url: "https://facebook.com/test" } })}
+        labels={LABELS}
+        onLinkClick={onLinkClick}
+      />
+    );
+    fireEvent.click(screen.getByText("Facebook"));
+    expect(onLinkClick).toHaveBeenCalledWith(
+      "facebook",
+      "https://facebook.com/test"
+    );
+  });
+
+  // ─── Today's hours card ──────────────────────────────────────────────────────
+
+  it("renders today's hours card when place.hours has entries", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ hours: [{ opens_at: 9, closes_at: 22 }] })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("Today's hours")).toBeInTheDocument();
+    expect(screen.getByText("09:00 - 22:00")).toBeInTheDocument();
+  });
+
+  it("does NOT render today's hours card when place.hours is empty", () => {
+    render(
+      <PlaceAboutTab place={makePlace({ hours: [] })} labels={LABELS} />
+    );
+    expect(screen.queryByText("Today's hours")).not.toBeInTheDocument();
+  });
+
+  it("does NOT render today's hours card when place.hours is absent", () => {
+    render(<PlaceAboutTab place={makePlace()} labels={LABELS} />);
+    expect(screen.queryByText("Today's hours")).not.toBeInTheDocument();
+  });
+
+  // ─── amenityLabels fallback to humanizeEnum ──────────────────────────────────
+
+  it("uses the amenityLabels map when the key is present", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ amenities: ["wifi"] })}
+        labels={LABELS}
+      />
+    );
+    // LABELS.amenityLabels.wifi = "Free Wi-Fi"
+    expect(screen.getByText("Free Wi-Fi")).toBeInTheDocument();
+  });
+
+  it("falls back to humanizeEnum (underscores → spaces) when key missing from amenityLabels", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ amenities: ["outdoor_seating"] })}
+        labels={LABELS}
+      />
+    );
+    // humanizeEnum("outdoor_seating") → "outdoor seating"
+    expect(screen.getByText("outdoor seating")).toBeInTheDocument();
+  });
+
+  // ─── Description card visibility ────────────────────────────────────────────
+
+  it("renders description card when description is set", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ description: "A great place to eat." })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("A great place to eat.")).toBeInTheDocument();
+  });
+
+  it("renders description card when generative_summary is set", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ generative_summary: "AI summary here." })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("AI summary here.")).toBeInTheDocument();
+  });
+
+  it("renders description card when review_summary is set", () => {
+    render(
+      <PlaceAboutTab
+        place={makePlace({ review_summary: "People love it." })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("People love it.")).toBeInTheDocument();
+  });
+
+  it("hides description card when none of description/generative_summary/review_summary are set", () => {
+    render(<PlaceAboutTab place={makePlace()} labels={LABELS} />);
+    // The card header title is "Description" which is the same as labels.description.
+    // The description card renders labels.description as its CardTitle.
+    // Use a more specific query: look for the card header content.
+    // Since labels.contactAndLocation is always rendered, we need to count occurrences.
+    // "Description" appears in labels.description; if no card exists it should not appear at all.
+    expect(screen.queryByText("A great place to eat.")).not.toBeInTheDocument();
+    // Verify no card title "Description" is rendered (description card uses labels.description as title)
+    // Note: "Description" also equals labels.description label inside the card — use getAllByText and check count
+    const descTexts = screen.queryAllByText("Description");
+    // When description card is hidden, "Description" label should not appear
+    expect(descTexts).toHaveLength(0);
+  });
+});