@bearmenu/ui 0.1.1 → 0.5.0

package/src/components/label.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Label } from "./label";
+import { Input } from "./input";
+import { Checkbox } from "./checkbox";
+
+const meta = {
+  title: "Components/Label",
+  component: Label,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: "Label" },
+};
+
+export const WithInput: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-1.5">
+      <Label htmlFor="username">Username</Label>
+      <Input id="username" placeholder="Enter username" />
+    </div>
+  ),
+};
+
+export const WithCheckbox: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  ),
+};

package/src/components/markdown-renderer.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MarkdownRenderer } from "./markdown-renderer";
+
+const meta = {
+  title: "Components/MarkdownRenderer",
+  component: MarkdownRenderer,
+  tags: ["autodocs"],
+} satisfies Meta<typeof MarkdownRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <MarkdownRenderer
+      content={`# Heading 1
+## Heading 2
+### Heading 3
+
+This is a paragraph with **bold** and *italic* text.
+
+- List item 1
+- List item 2
+- List item 3
+
+1. Ordered item
+2. Another item
+
+> This is a blockquote
+
+\`inline code\` and a code block:
+
+\`\`\`
+const hello = "world";
+\`\`\`
+
+| Column 1 | Column 2 |
+|----------|----------|
+| Cell 1   | Cell 2   |
+| Cell 3   | Cell 4   |
+`}
+      className="prose dark:prose-invert max-w-none"
+    />
+  ),
+};

package/src/components/multi-select-combobox.stories.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { MultiSelectCombobox } from "./multi-select-combobox";
+import { Label } from "./label";
+
+const meta = {
+  title: "Components/MultiSelectCombobox",
+  component: MultiSelectCombobox,
+  tags: ["autodocs"],
+} satisfies Meta<typeof MultiSelectCombobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const cuisines = [
+  { value: "italian", label: "Italian" },
+  { value: "japanese", label: "Japanese" },
+  { value: "mexican", label: "Mexican" },
+  { value: "indian", label: "Indian" },
+  { value: "thai", label: "Thai" },
+  { value: "french", label: "French" },
+  { value: "chinese", label: "Chinese" },
+  { value: "korean", label: "Korean" },
+];
+
+function MultiSelectDemo() {
+  const [selected, setSelected] = useState<string[]>([]);
+  return (
+    <div className="w-[350px] space-y-2">
+      <Label>Cuisines</Label>
+      <MultiSelectCombobox
+        options={cuisines}
+        selected={selected}
+        onSelectionChange={setSelected}
+        placeholder="Select cuisines..."
+        searchPlaceholder="Search cuisines..."
+      />
+      <p className="text-sm text-muted-foreground">
+        Selected: {selected.length ? selected.join(", ") : "none"}
+      </p>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => <MultiSelectDemo />,
+};
+
+function PreselectedDemo() {
+  const [selected, setSelected] = useState(["italian", "japanese", "thai"]);
+  return (
+    <div className="w-[350px]">
+      <MultiSelectCombobox
+        options={cuisines}
+        selected={selected}
+        onSelectionChange={setSelected}
+        placeholder="Select cuisines..."
+      />
+    </div>
+  );
+}
+
+export const Preselected: Story = {
+  render: () => <PreselectedDemo />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[350px]">
+      <MultiSelectCombobox
+        options={cuisines}
+        selected={["italian"]}
+        onSelectionChange={() => {}}
+        disabled
+      />
+    </div>
+  ),
+};

package/src/components/multi-select-menu.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Checkbox } from "./checkbox";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+export interface MultiSelectMenuOption {
+  value: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface MultiSelectMenuProps {
+  options: MultiSelectMenuOption[];
+  selected: string[];
+  onSelectedChange: (values: string[]) => void;
+  /** Trigger element rendered via Radix `asChild` — typically a Button. */
+  trigger: React.ReactNode;
+  /** Optional heading rendered above the option list. */
+  label?: string;
+  align?: "start" | "center" | "end";
+  /** Pixel width of the popover content. Defaults to 220. */
+  width?: number;
+  /** className for the popover content. */
+  contentClassName?: string;
+  emptyText?: string;
+}
+
+export function MultiSelectMenu({
+  options,
+  selected,
+  onSelectedChange,
+  trigger,
+  label,
+  align = "end",
+  width = 220,
+  contentClassName,
+  emptyText = "No options",
+}: MultiSelectMenuProps) {
+  const selectedSet = React.useMemo(() => new Set(selected), [selected]);
+
+  function handleToggle(value: string) {
+    const next = new Set(selectedSet);
+    if (next.has(value)) {
+      next.delete(value);
+    } else {
+      next.add(value);
+    }
+    onSelectedChange(Array.from(next));
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent
+        align={align}
+        className={cn("p-2", contentClassName)}
+        style={{ width }}
+      >
+        {label && (
+          <div className="text-foreground px-2 py-1.5 text-sm font-semibold">
+            {label}
+          </div>
+        )}
+        <div role="group" aria-label={label} className="flex flex-col gap-0.5">
+          {options.length === 0 ? (
+            <p className="text-muted-foreground px-2 py-1.5 text-sm">{emptyText}</p>
+          ) : (
+            options.map((option) => {
+              const checked = selectedSet.has(option.value);
+              return (
+                <label
+                  key={option.value}
+                  className={cn(
+                    "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm select-none",
+                    "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                    option.disabled && "pointer-events-none opacity-50",
+                  )}
+                >
+                  <Checkbox
+                    checked={checked}
+                    onCheckedChange={() => handleToggle(option.value)}
+                    disabled={option.disabled}
+                    aria-label={typeof option.label === "string" ? option.label : option.value}
+                  />
+                  <span className="flex-1">{option.label}</span>
+                </label>
+              );
+            })
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/pagination.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "./pagination";
+
+const meta = {
+  title: "Components/Pagination",
+  component: Pagination,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  ),
+};

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