@bearmenu/ui 0.1.1 → 0.5.0

package/src/components/place-types.ts

@@ -0,0 +1,127 @@
+/**
+ * Structural mirror of the openapi `Place` schema, decoupled from any one app's
+ * generated types. Both FE and admin map their domain shapes into this type
+ * before passing data to `<PlaceCard>` / `<PlaceAboutTab>`.
+ */
+export type PlacePreview = {
+  id: string
+  slug: string
+  name: string
+  description?: string
+  generative_summary?: string
+  review_summary?: string
+  open_now?: boolean
+  rating?: { rating: number; count: number }
+  review_count?: number
+  hours?: PlaceHourBlock[]
+  today_schedule?: PlaceHourBlock[]
+  location?: {
+    address?: string
+    geolocation?: { lat: number | string; lon: number | string }
+    distance?: { meters?: number }
+  }
+  price_dishes?: PlacePriceRange
+  price_drinks?: PlacePriceRange
+  cuisines?: string[]
+  amenities?: string[]
+  payment_options?: string[]
+  accessibility_features?: string[]
+  parking_options?: string[]
+  landmarks?: Array<{ name: string; distance_meters?: number }>
+  areas?: Array<{ name: string }>
+  busyness?: Array<{ hour: number; score: number }>
+  type?: string
+  business_status?: 'operational' | 'closed_temporarily' | 'closed_permanently'
+  phone?: string
+  website_url?: string
+  socials?: { instagram_url?: string; facebook_url?: string }
+  /**
+   * Pre-resolved thumbnail URL. Callers compute this themselves
+   * (FE: `https://cdn.bear.menu/places/${slug}-thumbnail.jpg`,
+   *  admin: form's primary photo URL or blob URL).
+   */
+  thumbnail_url?: string
+}
+
+export type PlaceHourBlock = { opens_at: number; closes_at: number }
+
+export type PlacePriceRange = {
+  price_range_low?: number
+  price_range_high?: number
+}
+
+/** Labels passed to `<PlaceCard>`. All translation happens in the caller. */
+export type PlaceCardLabels = {
+  open: string
+  closed: string
+  until: string
+  opensAt: string
+  currency: string
+}
+
+/**
+ * Labels passed to `<PlaceAboutTab>`. All translation happens in the caller.
+ *
+ * Dynamic suffix maps (`amenityLabels`, etc.) translate API enum values like
+ * `wheelchair_accessible_entrance` into human strings. Missing keys fall back
+ * to the raw enum value (with underscores → spaces).
+ */
+export type PlaceAboutTabLabels = {
+  overview: string
+  description: string
+  whatPeopleSay: string
+  contactAndLocation: string
+  address: string
+  instagram: string
+  facebook: string
+  todayHours: string
+  statusOpen: string
+  statusClosed: string
+  typicalBusyness: string
+  cuisines: string
+  amenities: string
+  paymentOptions: string
+  accessibility: string
+  parking: string
+  nearbyLandmarks: string
+  neighborhood: string
+  businessInformation: string
+  type: string
+  status: string
+  amenityLabels: Record<string, string>
+  paymentLabels: Record<string, string>
+  accessibilityLabels: Record<string, string>
+  parkingLabels: Record<string, string>
+  typeLabels: Record<string, string>
+  statusLabels: Record<string, string>
+}
+
+/** Discriminator for `<PlaceAboutTab>`'s `onLinkClick` callback. */
+export type PlaceLinkKind = 'phone' | 'website' | 'instagram' | 'facebook' | 'address'
+
+/**
+ * Labels passed to `<PlaceDetailsMobile>`. Extends `PlaceAboutTabLabels` with
+ * the header/tab-strip strings unique to the mobile place-details surface.
+ */
+export type PlaceDetailsMobileLabels = PlaceAboutTabLabels & {
+  /** Tab strip — "About" is highlighted, the rest are visual placeholders. */
+  tabs: {
+    menu: string
+    about: string
+    reviews: string
+    events: string
+  }
+  /** Status badge over the hero image and the inline open/closed pill in the info row. */
+  statusBadge: {
+    openNow: string
+    closed: string
+    /** Inserted with surrounding " · " separators. e.g. "Closes at" */
+    closesAt: string
+    opensAt: string
+    opensTomorrow: string
+  }
+  /** Review count formatter. Pass a translator that handles ICU pluralization. */
+  reviewCount: (count: number) => string
+  /** "No image available" fallback shown when no thumbnail is set. */
+  noImageAvailable: string
+}

package/src/components/popover.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Label } from "./label";
+
+const meta = {
+  title: "Components/Popover",
+  component: Popover,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Dimensions</h4>
+            <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+          </div>
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="width">Width</Label>
+              <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label htmlFor="height">Height</Label>
+              <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  ),
+};

package/src/components/progress.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Progress } from "./progress";
+
+const meta = {
+  title: "Components/Progress",
+  component: Progress,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <Progress value={60} className="w-[300px]" />,
+};
+
+export const Empty: Story = {
+  render: () => <Progress value={0} className="w-[300px]" />,
+};
+
+export const Full: Story = {
+  render: () => <Progress value={100} className="w-[300px]" />,
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[300px]">
+      <Progress value={0} />
+      <Progress value={25} />
+      <Progress value={50} />
+      <Progress value={75} />
+      <Progress value={100} />
+    </div>
+  ),
+};

package/src/components/radio-group.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RadioGroup, RadioGroupItem } from "./radio-group";
+import { Label } from "./label";
+
+const meta = {
+  title: "Components/RadioGroup",
+  component: RadioGroup,
+  tags: ["autodocs"],
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-1">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-1" id="r1" />
+        <Label htmlFor="r1">Option One</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-2" id="r2" />
+        <Label htmlFor="r2">Option Two</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-3" id="r3" />
+        <Label htmlFor="r3">Option Three</Label>
+      </div>
+    </RadioGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-1" disabled>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-1" id="rd1" />
+        <Label htmlFor="rd1">Disabled selected</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-2" id="rd2" />
+        <Label htmlFor="rd2">Disabled unselected</Label>
+      </div>
+    </RadioGroup>
+  ),
+};

package/src/components/rating.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Rating } from "./rating";
+
+const meta = {
+  title: "Components/Rating",
+  component: Rating,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Rating>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <Rating value={4} reviewCount={128} />,
+};
+
+export const HalfStar: Story = {
+  render: () => <Rating value={3.5} reviewCount={42} />,
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Rating value={4} size="sm" reviewCount={10} />
+      <Rating value={4} size="md" reviewCount={10} />
+      <Rating value={4} size="lg" reviewCount={10} />
+    </div>
+  ),
+};
+
+export const NoCount: Story = {
+  render: () => <Rating value={5} showCount={false} />,
+};
+
+export const AllRatings: Story = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Rating value={1} reviewCount={5} />
+      <Rating value={2} reviewCount={12} />
+      <Rating value={3} reviewCount={34} />
+      <Rating value={4} reviewCount={89} />
+      <Rating value={5} reviewCount={201} />
+    </div>
+  ),
+};

package/src/components/scroll-area.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ScrollArea, ScrollBar } from "./scroll-area";
+import { Separator } from "./separator";
+
+const meta = {
+  title: "Components/ScrollArea",
+  component: ScrollArea,
+  tags: ["autodocs"],
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const tags = Array.from({ length: 50 }).map((_, i) => `Item ${i + 1}`);
+
+export const Vertical: Story = {
+  render: () => (
+    <ScrollArea className="h-72 w-48 rounded-md border">
+      <div className="p-4">
+        <h4 className="mb-4 text-sm font-medium leading-none">Items</h4>
+        {tags.map((tag) => (
+          <div key={tag}>
+            <div className="text-sm">{tag}</div>
+            <Separator className="my-2" />
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+};
+
+export const Horizontal: Story = {
+  render: () => (
+    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+      <div className="flex w-max space-x-4 p-4">
+        {Array.from({ length: 20 }).map((_, i) => (
+          <div
+            key={i}
+            className="w-[150px] shrink-0 rounded-md border p-4 text-center text-sm"
+          >
+            Card {i + 1}
+          </div>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  ),
+};

package/src/components/search-bar.stories.tsx

@@ -0,0 +1,92 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { SearchBar } from "./search-bar";
+
+const meta = {
+  title: "Components/SearchBar",
+  component: SearchBar,
+  tags: ["autodocs"],
+} satisfies Meta<typeof SearchBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function SearchBarDemo() {
+  const [value, setValue] = useState("");
+  return <SearchBar value={value} onChange={setValue} placeholder="Search restaurants..." />;
+}
+
+export const Default: Story = {
+  render: () => <SearchBarDemo />,
+};
+
+export const Editorial: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <SearchBar
+        value={value}
+        onChange={setValue}
+        variant="editorial"
+        placeholder="Search..."
+        className="w-[400px]"
+      />
+    );
+  },
+};
+
+export const Primary: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <SearchBar
+        value={value}
+        onChange={setValue}
+        variant="primary"
+        placeholder="Search..."
+        className="w-[400px]"
+      />
+    );
+  },
+};
+
+export const Secondary: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <SearchBar
+        value={value}
+        onChange={setValue}
+        variant="secondary"
+        placeholder="Search..."
+        className="w-[400px]"
+      />
+    );
+  },
+};
+
+export const Compact: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <SearchBar
+        value={value}
+        onChange={setValue}
+        size="compact"
+        placeholder="Quick search..."
+        className="w-[300px]"
+      />
+    );
+  },
+};
+
+export const Searching: Story = {
+  render: () => (
+    <SearchBar
+      value="pizza"
+      isSearching
+      placeholder="Search..."
+      className="w-[400px]"
+    />
+  ),
+};

package/src/components/searchable-select.stories.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { SearchableSelect } from "./searchable-select";
+import { Label } from "./label";
+
+const meta = {
+  title: "Components/SearchableSelect",
+  component: SearchableSelect,
+  tags: ["autodocs"],
+} satisfies Meta<typeof SearchableSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const frameworks = [
+  { value: "next", label: "Next.js", description: "The React Framework" },
+  { value: "remix", label: "Remix", description: "Full Stack Web Framework" },
+  { value: "astro", label: "Astro", description: "Content-first Framework" },
+  { value: "nuxt", label: "Nuxt", description: "The Intuitive Vue Framework" },
+  { value: "svelte", label: "SvelteKit", description: "Web development, streamlined" },
+];
+
+function SearchableSelectDemo() {
+  const [value, setValue] = useState<string | undefined>();
+  return (
+    <div className="w-[300px] space-y-2">
+      <Label>Framework</Label>
+      <SearchableSelect
+        options={frameworks}
+        value={value}
+        onValueChange={setValue}
+        placeholder="Select a framework..."
+        searchPlaceholder="Search frameworks..."
+      />
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => <SearchableSelectDemo />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <SearchableSelect
+        options={frameworks}
+        value={undefined}
+        onValueChange={() => {}}
+        disabled
+        placeholder="Disabled..."
+      />
+    </div>
+  ),
+};

package/src/components/select.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+import { Label } from "./label";
+
+const meta = {
+  title: "Components/Select",
+  tags: ["autodocs"],
+  component: Select,
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="cherry">Cherry</SelectItem>
+        <SelectItem value="grape">Grape</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="grid gap-1.5">
+      <Label>Country</Label>
+      <Select>
+        <SelectTrigger className="w-[200px]">
+          <SelectValue placeholder="Select country" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="us">United States</SelectItem>
+          <SelectItem value="uk">United Kingdom</SelectItem>
+          <SelectItem value="ro">Romania</SelectItem>
+          <SelectItem value="de">Germany</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  ),
+};
+
+export const WithGroups: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="Select a food" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Fruits</SelectLabel>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Vegetables</SelectLabel>
+          <SelectItem value="carrot">Carrot</SelectItem>
+          <SelectItem value="broccoli">Broccoli</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Select disabled>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="Disabled" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="a">Option A</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};

package/src/components/separator.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Separator } from "./separator";
+
+const meta = {
+  title: "Components/Separator",
+  component: Separator,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <p className="text-sm text-foreground">Section one</p>
+      <Separator className="my-4" />
+      <p className="text-sm text-foreground">Section two</p>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex items-center gap-4 h-8">
+      <span className="text-sm">Item 1</span>
+      <Separator orientation="vertical" />
+      <span className="text-sm">Item 2</span>
+      <Separator orientation="vertical" />
+      <span className="text-sm">Item 3</span>
+    </div>
+  ),
+};